Vue禁用按钮触发事件

Question

嘿，我对 Vue 非常陌生，对于这个项目，我想在禁用按钮上触发事件。有没有办法在禁用按钮上触发事件？

JsFillde代码链接 = https://jsfiddle.net/ujjumaki/Lg4vcj97/6/

查看

<div id="app">
  <b-button @click="disabledButton" disabled >Disabled</b-button>
  <b-button @click="enabledButton" >Enabled</b-button>
</div>

方法

new Vue({
  el: "#app",
  data: {

  },
  methods: {
    disabledButton(){
        console.log('clicked disabled');
    },
    enabledButton(){
        console.log('clicked enabled');
    }
  }
})

Answer 1

该按钮真的需要禁用吗？或者您可以模拟禁用状态吗？

我在这里为“禁用”类添加了引导CSS，但这不是必需的。

// template
<b-button  @click="disabledButton"  class="disabled-btn disabled" >Disabled</b-button>
  

// css
.disabled-btn{
    cursor: default !important;
    pointer-events: unset !important;
    
}

https://jsfiddle.net/qjacr38y/23/

Answer 2

pointer-events: unset

不适合我。

我正在使用

none

来代替

.disabled{
    pointer-events: none;    
}