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

相关推荐
freewlt1 分钟前
React Server Components 深度解析:从原理到实战的完整指南
前端·javascript·react.js
ZC跨境爬虫38 分钟前
Playwright进阶操作:鼠标拖拽与各类点击实战(含自定义拖拽实例)
前端·爬虫·python·ui
小江的记录本41 分钟前
【RabbitMQ】RabbitMQ核心知识体系全解(5大核心模块:Exchange类型、消息确认机制、死信队列、延迟队列、镜像队列)
java·前端·分布式·后端·spring·rabbitmq·mvc
心静财富之门42 分钟前
《前端零基础入门:HTML + CSS + JavaScript 全套速查表(详细版 + 实例)》
前端·javascript·python
星空43 分钟前
前端--A_4--HTML表单
前端
We་ct1 小时前
JS手撕:DOM操作 & 浏览器API高频场景详解
开发语言·前端·javascript·面试·状态模式·操作·考点
小江的记录本1 小时前
【RocketMQ】RocketMQ核心知识体系全解(5大核心模块:架构模型、事务消息两阶段提交、回查机制、延迟消息、顺序消息)
linux·运维·服务器·前端·后端·架构·rocketmq
三万棵雪松1 小时前
【Linux 物联网网关主控系统-Web部分(二)】
linux·前端·物联网
We་ct1 小时前
LeetCode 137. 只出现一次的数字 II:从基础到最优的两种解法详解
前端·数据结构·算法·leetcode·typescript·位运算
源码站~1 小时前
基于Spring Boot+Vue3的烹饪交流学习系统 设计与实现
java·vue.js·spring boot·后端·mysql·毕业设计·毕设