在工作中遇到过这样一类需求，点击一个设置了disabled的置灰按钮，并弹出消息提示用户当前按钮不可点击的原因，像其他标签也需要同样处理，比如input输入框、select选择框、checkbox多选框等。因为使用的是elementplus组件库，所以便先去翻遍了文档，但也没有找到类似功能，那只能撸起袖子，另辟蹊径了。
思路与验证
我一开始比较好奇为什么设置了disabled属性的el-button就不触发@click事件了，于是我抱着希望去看了elementplus el-button组件的源码，然而发现el-button除了给dom加上了disabled，也没做其他而外的处理。说明这是disabled属性自带的效果，于是我再去看W3C关于disabled的标准。
如果在表单控件上指定了
disabled属性，则该元素及其子控件不参与约束验证。通常浏览器会将它们打灰处理，它不会收到任何浏览事件，如鼠标点击或与焦点相关的事件。
根据以上W3C的描述，在button上监听点击事件是不可能有用的了。但还有其他方式，可以根据事件捕获，在button外层div标签上监听click事件，并弹出消息提示。想想应该是可以的，但如果你试了，你很快又会陷入失望，结果是依旧不会触发外出div的点击事件。 再仔细一想，这是disabled附带的事件默认行为，vue中有一个prevent事件修饰符，可以阻止事件的默认行为。按照上面的思路，配合上prevent，如下代码
const clickHandleButton = () => {
console.log('clicked!')
}
<button @click.prevent="clickHandleButton">点击</button>
可以正常触发事件了。
总结
其实通过查阅vue源码，@click.prevent编译出来的是withModifiers(clickHandleButton, ["prevent"])，withModifiers包裹我们定义的回调函数并返回一个新的事件回调函数，内部调用e.preventDefault()阻止默认行为。万变不离其宗，学好一门上层框架固然重要，但dom、事件绑定等基础的知识也不能丢，基础往往决定上层建筑。
