Vue禁用按钮触发事件

Question

嘿，我是 Vue 的新手，对于这个项目，我想在禁用按钮上触发事件。有没有办法在禁用按钮上触发事件？

JsFillde 代码 Link = 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

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

我在这里为 'disabled' class 添加了 bootstrap 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/

Vue禁用按钮触发事件

Vue disabled button trigger event

javascript

events

vue.js