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

相关推荐
晴天164 分钟前
HTML canvas标签使用指南-Day32
前端·html
weixin199701080167 分钟前
《alibaba.idle.isv.order.ship 接入实录:闲鱼订单发货回传的5个隐式约束》(附Python源码)
服务器·前端·python
初願致夕霞14 分钟前
五种IO模型(详解非阻塞IO与多路转接)
linux·前端·网络·数据库·tcp/ip
深圳多奥智能一卡(码、脸)通系统16 分钟前
智能梯控SDK可直接用于第三方开发对接的接口文档说明书
服务器·前端·算法
烂蜻蜓25 分钟前
Flask入门教程(十五):错误处理与日志——打造健壮的Web应用
前端·python·flask
深念Y32 分钟前
浏览器缩放检测的前端通用方案
前端
风骏时光牛马40 分钟前
AIAgent异常故障根因分析与复盘总结
前端
weixin_4316004441 分钟前
前端数据埋点(7):Web Vitals——页面慢不慢,不是再包一层 fetch
前端·性能优化·sentry·数据埋点
千里码aicood2 小时前
Django+Vue 基于XGBoost与随机森林的沿海地区台风天气大数据预警系统实现
vue.js·随机森林·django
এ慕ོ冬℘゜2 小时前
前端实战:jQuery实现动态表格渲染与状态切换功能
前端·javascript·jquery