【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。

相关推荐
没落英雄8 小时前
5. 从零开始搭建一个 AI Agent —— 人机协作与中断恢复
前端·人工智能·架构
品尚公益团队9 小时前
C#在asp.net网页开发中的带cookie登录实现
前端·c#·asp.net
没有了遇见9 小时前
AI Agent 是什么?—— 一文理解 LLM、Memory、Skills、Tools、MCP、Workflow,Context
android·前端·程序员
用户831348593069810 小时前
Cesium自定义可调节星空夜景+星星闪烁
vue.js·cesium
后台开发者Ethan10 小时前
setState组件更新
前端·javascript·react
谙忆102410 小时前
大文件上传实战:前端分片、断点续传、秒传与并发控制怎么落地
前端
轻动琴弦11 小时前
VoltTool —— 一站式在线开发者工具平台,69+实用工具免费使用
前端·chrome
就叫飞六吧11 小时前
不同站点iframe嵌套种cookie、localstorege.set() 关系
前端
星栈11 小时前
LiveView 怎么测:从组件测试到端到端,我终于不再只敢手点页面了
前端·前端框架·elixir
蜡台11 小时前
uniapp vue2 转 vue3
前端·javascript·uni-app·vue3·vue2