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

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

 // 实现按钮禁用
 el.disabled = true

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

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

 // 实现按钮禁用
 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。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/930104.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

使用数据库同步中间件DBSyncer实现不同数据库的数据同步

点击上方蓝字关注我 有去O(ORACLE数据库)、信创、国产化数据库等项目实践的同学应该都遇到过不同数据库之前进行数据迁移的问题,虽然有各种工具可以实现,但是有些工具的部署、使用比较复杂,也有些工具迁移数据效率很低。本文将介绍一款开源且…

3.2 串口_HAL库实现代码

1、串口用作调试 串口用作调试就是配置好串口后,用串口做一些输出。对于代码层面,最终调用的是标准库printf来实现串口数据的输出。 1.1 CubeMX配置 1、RCC配置外部晶振 2、时钟树配置如下 3、工程配置如下 4、串口配置如下 注意这里默认设置的波特率…

乌龟咬人,小意外中的大警示

近日,听闻有朋友被自家乌龟咬了手指,这看似滑稽的小意外,实则蕴含着不少值得我们深思的安全与责任问题。 乌龟,在大众的认知里,向来是行动迟缓、性情温和的宠物代表。它们慢悠悠地爬行,憨态可掬的模样常常…

AI赋能:构建安全可信的智能电子档案库

在档案的政策与法规上,《中华人民共和国档案法》2020年修订新增,对电子档案的合法要件、地位和作用、安全管理要求和信息化系统建设等方面作出了明确规定,保障数字资源的安全保存和有效利用。 日前,国家档案局令第22号公布《电子…

解谜类游戏《迷失岛2》等如何抽象出一套通用高效开发框架?

解谜类游戏以精妙的谜题设计和引人入胜的故事叙述为特点,考验着玩家的智慧与观察力。《迷失岛2》与《南瓜先生2九龙城寨》正是这一领域的佳作。游戏以独特的艺术风格和玩法设计吸引了大量玩家,而它们背后隐藏着一套强大的框架。 上海胖布丁游戏的技术总…

使用ALB实现gRPC协议的负载均衡

gRPC是一种高性能、开源的远程过程调用框架,当您使用gRPC进行后端服务通信时,您可使用应用型负载均衡ALB(Application Load Balancer)实现gRPC协议的负载均衡,统一流量入口。gRPC基于HTTP/2协议进行通信,目…

JUC:Synchronized和锁升级

1. 面试题 谈谈你对Synchronized的理解Sychronized的锁升级你聊聊Synchronized实现原理,monitor对象什么时候生成的?知道monitor的monitorenter和monitorexit这两个是怎么保证同步的嘛?或者说这两个操作计算机底层是如何执行的偏向锁和轻量级…

ros项目dual_arm_pick-place(对比moveit配置助手生成的文件)

目录 前言正文gazebo_controllers.yaml变更ros_controllers.yaml变更simple_moveit_controllers.yaml变更moveit_planning_execution.launch变更ros_controllers.launch变更其他文件 汇总总结 前言 在本专栏前文中讲到,作者有moveit配置助手导出的包marmbots&#…

【力扣】13.罗马数字转整数

问题描述 思路解析 对于这种限制字符的问题&#xff0c;使用Map来对键值存储 对其进行判断&#xff0c;如果前面的数小于后面的数&#xff0c;那么结果相减 否则&#xff0c;正常相加。 代码 class Solution {Map<Character,Integer> mapnew HashMap<Character,In…

从ground_truth mask中获取图像的轮廓图

引言 在图像取证领域&#xff0c;主要分为检测和定位两个方面。检测就是判断一张图片是否为伪造图&#xff0c;定位与传统意义上的语义分割任务相近&#xff0c;就是定位伪造像素的区域。如果单纯使用语义分割网络训练&#xff0c;只能获得次优解&#xff0c;而像多任务学习那样…

C语言程序设计P5-2【应用函数进行程序设计 | 第二节】——知识要点:函数的参数及返回值和函数的调用及声明

知识要点&#xff1a;函数的参数及返回值和函数的调用及声明 视频&#xff1a; 目录 一、任务分析 二、必备知识与理论 三、任务实施 一、任务分析 1.求x的n次方的值也就是求n个x的乘积&#xff0c;可把x和n作为函数的形参&#xff0c;定义一个函数power来完成这个功能&am…

【sgUploadList】自定义组件:基于elementUI的el-upload封装的上传列表组件,适用于上传附件时

sgUploadList源码 <template><div :class"$options.name"><ul class"files"><li v-for"(a, i) in files" :key"i"><el-link click.stop"clickFile(a)"><img :src"getFlieThumbSrc(a…

位运算(一)位运算简单总结

191. 位1的个数 给定一个正整数 n&#xff0c;编写一个函数&#xff0c;获取一个正整数的二进制形式并返回其二进制表达式中 设置位 的个数&#xff08;也被称为 汉明重量&#xff09;。 示例 1&#xff1a; 输入&#xff1a;n 11 输出&#xff1a;3 解释&#xff1a;输入的二…

聚合支付系统/官方个人免签系统/三方支付系统稳定安全高并发 附教程

聚合支付系统/官方个人免签系统/三方支付系统稳定安全高并发 附教程 系统采用FastAdmin框架独立全新开发&#xff0c;安全稳定,系统支持代理、商户、码商等业务逻辑。 针对最近一些JD&#xff0c;TB等业务定制&#xff0c;子账号业务逻辑API 非常详细&#xff0c;方便内置…

声音克隆GPT-SoVITS

作者&#xff1a;吴业亮 博客&#xff1a;wuyeliang.blog.csdn.net 一、原理介绍 GPT-SoVITS&#xff0c;作为一款结合了GPT&#xff08;生成预训练模型&#xff09;和SoVITS&#xff08;基于变分信息瓶颈技术的歌声转换&#xff09;的创新工具&#xff0c;正在声音克隆领域掀…

WLAN AutoConfig服务假死?重启服务恢复网络连接!

目录 背景&#xff1a; 过程&#xff1a; 可能引起原因&#xff1a; 具体解决步骤&#xff1a; 步骤一: 步骤二&#xff1a; 总结&#xff1a; 背景&#xff1a; 这个问题困扰我好长一段时间了&#xff0c;每次下班将电脑关机后&#xff0c;次日早上电脑开机的时候无线…

鸿蒙面试题 -生命周期的执行顺序

在开始之前&#xff0c;我们先明确自定义组件和页面的关系&#xff1a; 自定义组件&#xff1a;Component装饰的UI单元&#xff0c;可以组合多个系统组件实现UI的复用&#xff0c;可以调用组件的生命周期。 页面&#xff1a;即应用的UI页面。可以由一个或者多个自定义组件组成…

Midjourney Describe API 的对接和使用

Midjourney Describe API 的对接和使用 Midjourney Describe API 的主要功能是通过上传图片&#xff0c;获取对图片的描述。使用该 API&#xff0c;只需要传递图片文件地址&#xff0c;API 会返回图片的详细描述。无需繁琐的参数设置&#xff0c;即可获得高质量的图片描述。 …

顶会新宠!KAN-LSTM完美融合新方案

2024深度学习发论文&模型涨点之——KANLSTM KAN-LSTM混合预测模型是一种结合了自注意力机制&#xff08;KAN, Key-attention network&#xff09;和长短时记忆网络&#xff08;LSTM&#xff09;的深度学习模型&#xff0c;主要用于序列数据的预测任务&#xff0c;如时间序…

RabbitMQ介绍及安装

文章目录 一. MQ二. RabbitMQ三. RabbitMQ作用四. MQ产品对比五. 安装RabbitMQ1. 安装erlang2. 安装rabbitMQ3. 安装RabbitMQ管理界⾯4. 启动服务5. 访问界面6. 添加管理员用户7. 重新登录 一. MQ MQ( Message queue ), 从字⾯意思上看, 本质是个队列, FIFO 先⼊先出&#xff…