【vue2自定义指令】v-disabled 实现el-switch,el-button等elementUI禁用(disabled)效果

如果你搜过类似的功能,肯定看到过千篇一律的

javascript 复制代码
 // 实现按钮禁用
 el.disabled = true

 // 增加 elementUI 的禁用样式类
 el.classList.add('is-disabled')

但是这个方案明显对el-switch,不起作用,所以我这边直接把方案贴出来,不想了解具体原理的可以拿着走人了

javascript 复制代码
 // 实现按钮禁用
 el.disabled = true

 // 增加 elementUI 的禁用样式类
 el.classList.add('is-disabled')
 
 // 设置样式,禁止点击, 解决switch,仅设置样式无效的问题
 el.style = 'pointer-events: none;';

那么为什么,仅有classList和disabled,可以在el-button中生效,但是el-switch中却不行呢,我们打印一下看看二者的区别。

可以清晰的看出,el-switch,由一个div包着,input type="checkbox"和span,所以单纯的给div加了disabled是没有用的,而el-button,其本身就是对button进行的改造,button本身就支持disabled,所以就可以直接生效。

pointer-events: none;直接从元素层面禁止点击,所以二者并不冲突。

至此问题的已解决

其实我也试过给内部input和span做处理,但后来发现点击事件,其实是在外侧div。

相关推荐
LYFlied1 小时前
从 Vue 到 React,再到 React Native:资深前端开发者的平滑过渡指南
vue.js·react native·react.js
爱喝白开水a1 小时前
前端AI自动化测试:brower-use调研让大模型帮你做网页交互与测试
前端·人工智能·大模型·prompt·交互·agent·rag
董世昌411 小时前
深度解析ES6 Set与Map:相同点、核心差异及实战选型
前端·javascript·es6
B站_计算机毕业设计之家2 小时前
豆瓣电影数据采集分析推荐系统 | Python Vue Flask框架 LSTM Echarts多技术融合开发 毕业设计源码 计算机
vue.js·python·机器学习·flask·echarts·lstm·推荐算法
吃杠碰小鸡2 小时前
高中数学-数列-导数证明
前端·数学·算法
kingwebo'sZone2 小时前
C#使用Aspose.Words把 word转成图片
前端·c#·word
xjt_09013 小时前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
我是伪码农3 小时前
Vue 2.3
前端·javascript·vue.js
夜郎king3 小时前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落
跳动的梦想家h4 小时前
环境配置 + AI 提效双管齐下
java·vue.js·spring