如何在Vue中为disabled状态的按钮绑定并触发点击事件？

问题原因 #

HTML规范中，添加了disabled属性的元素会被浏览器默认拦截所有鼠标交互事件，包括click事件，这是浏览器原生行为，和Vue的事件绑定无关，因此你当前代码中给禁用按钮绑定的@click不会触发。

可用实现方案 #

方案1：自定义禁用状态（最推荐） #

不使用原生disabled属性，通过自定义样式模拟禁用效果，同时保留按钮的事件响应能力，还可以灵活区分禁用态和启用态的点击逻辑。

视图层代码

<div id="app">
  <!-- 去掉原生disabled，添加自定义样式类，用变量控制禁用状态 -->
  <b-button @click="handleBtnClick" :class="{'is-disabled': isBtnDisabled}">
    {{ isBtnDisabled ? 'Disabled' : 'Enabled' }}
  </b-button>
  <b-button @click="enabledButton">Enabled</b-button>
</div>

样式代码

.is-disabled {
  /* 模拟原生禁用样式 */
  opacity: 0.65;
  cursor: not-allowed;
  /* 避免组件库默认样式阻断事件 */
  pointer-events: auto !important;
}

逻辑层代码

new Vue({
  el: "#app",
  data: {
    isBtnDisabled: true // 控制按钮禁用状态
  },
  methods: {
    handleBtnClick(){
      if(this.isBtnDisabled) {
        console.log('clicked disabled');
        // 此处填写禁用状态下需要触发的逻辑
        return
      }
      // 此处填写按钮正常启用时的业务逻辑
    },
    enabledButton(){
      console.log('clicked enabled');
    }
  }
})

方案2：父元素捕获事件 #

如果必须保留原生disabled属性，可以在外层包裹一个容器，通过事件捕获机制监听点击事件，判断触发源是否为目标禁用按钮即可响应。

示例代码

<div id="app">
  <div @click.capture="handleDisabledClick">
    <b-button disabled id="disabled-btn">Disabled</b-button>
  </div>
</div>

methods: {
  handleDisabledClick(e) {
    if(e.target.id === 'disabled-btn') {
      console.log('clicked disabled');
    }
  }
}

内容的提问来源于stack exchange，提问作者Yahoo