【vue2自定义指令】v-disabled 实现el-switch，el-button等elementUI禁用（disabled）效果

Li_Ning212024-12-07 13:53

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

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。