【2023-09-01】vue中自定义按钮设置disabled属性后，异常触发click事件

vue中自定义按钮设置disabled属性后，异常触发click事件

项目中自定义按钮，使用a标签实现。设置disabled属性后，点击可以触发click事件。
由于各种原因，项目中并未使用成熟的第三方组件库，例如element-ui，ant-design。大多数组件是自己封装的，部分借鉴了原项目中jQuery、bootstrap实现。

按钮组件源码

列表中需要根据数据中某个变量的值，控制该数据是否可以进行删除操作。代码如下

<a class="btn btn-primary btx-xs" :disabled="_slot.isDelete" @click="deleteFunc(_slot)">删除</a>
1

当某一条数据中的isDelete为true时，按钮样式为禁用样式，且不能进行删除操作。
但是，此时点击显示禁用效果的按钮时，依然可以发起删除请求！！！

问题原因

首先说明： a标签 是没有disable 属性的 。故在a标签上添加disabled属性是无效的。
为什么按钮展示禁用效果？由于项目中糅合了jQuery和bootstrap的实现，给a标签添加了btn btn-primary btx-xs 类后，就会表现的像button，button是具备disabled的样式的。
所以该自定义的按钮组件添加禁用后，可以显示禁用的效果

解决方案

方案一：调整按钮组件使用的标签，用button替换

替换b标签为button后，即可正常禁用

<button class="btn btn-primary btx-xs" :disabled="_slot.isDelete" @click="deleteFunc(_slot)">删除</button>
1

方案二：不跳转标签，在删除方法中，添加处理逻辑

在删除方法中，判断isDelete参数是否为true，为true时直接return，不进行后续代码执行

deleteFunc(_row) {
	if(_row.isDelete) return
	//正常的删除逻辑
	...
}
1
2
3
4
5

方案三：设置a标签禁用，配合disabled与 pointer-events属性（不推荐）

既然项目中有使用到jQuery和bootstrap的实现，也可以通过jQuery获取对应的DOM元素，然后设置 pointer-events属性。
实现代码大致如下

<a class="btn btn-primary btx-xs custom_btn" :disabled="_slot.isDelete" @click="deleteFunc(_slot)">删除</a>

$(".custom_btn").attr("disabled",true); 
$(".custom_btn").css("pointer-events","none");
1
2
3
4

注意列表中根据返回值不同，会出现按钮禁用与否不同的情况，上述代码可能会将所有的按钮禁用，实际使用时需要注意区别

尾巴

点滴记录，汇聚江河