卫生局网站模板,做百度手机网站点,台州企业网站搭建图片,网络营销与策划实践vue中自定义按钮设置disabled属性后#xff0c;异常触发click事件
项目中自定义按钮#xff0c;使用a标签实现。设置disabled属性后#xff0c;点击可以触发click事件。 由于各种原因#xff0c;项目中并未使用成熟的第三方组件库#xff0c;例如element-ui#xff0c;a…vue中自定义按钮设置disabled属性后异常触发click事件
项目中自定义按钮使用a标签实现。设置disabled属性后点击可以触发click事件。 由于各种原因项目中并未使用成熟的第三方组件库例如element-uiant-design。大多数组件是自己封装的部分借鉴了原项目中jQuery、bootstrap实现。
按钮组件源码
列表中需要根据数据中某个变量的值控制该数据是否可以进行删除操作。代码如下
a classbtn btn-primary btx-xs :disabled_slot.isDelete clickdeleteFunc(_slot)删除/a当某一条数据中的isDelete为true时按钮样式为禁用样式且不能进行删除操作。 但是此时点击显示禁用效果的按钮时依然可以发起删除请求
问题原因
首先说明 a标签 是没有disable 属性的 。故在a标签上添加disabled属性是无效的。 为什么按钮展示禁用效果由于项目中糅合了jQuery和bootstrap的实现给a标签添加了btn btn-primary btx-xs 类后就会表现的像buttonbutton是具备disabled的样式的。 所以该自定义的按钮组件添加禁用后可以显示禁用的效果
解决方案
方案一调整按钮组件使用的标签用button替换
替换b标签为button后即可正常禁用
button classbtn btn-primary btx-xs :disabled_slot.isDelete clickdeleteFunc(_slot)删除/button方案二不跳转标签在删除方法中添加处理逻辑
在删除方法中判断isDelete参数是否为true为true时直接return不进行后续代码执行
deleteFunc(_row) {if(_row.isDelete) return//正常的删除逻辑...
}方案三设置a标签禁用配合disabled与 pointer-events属性不推荐
既然项目中有使用到jQuery和bootstrap的实现也可以通过jQuery获取对应的DOM元素然后设置 pointer-events属性。 实现代码大致如下
a classbtn btn-primary btx-xs custom_btn :disabled_slot.isDelete clickdeleteFunc(_slot)删除/a$(.custom_btn).attr(disabled,true);
$(.custom_btn).css(pointer-events,none);注意列表中根据返回值不同会出现按钮禁用与否不同的情况上述代码可能会将所有的按钮禁用实际使用时需要注意区别
尾巴
点滴记录汇聚江河
