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

news2025/2/24 12:06:21

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

烟草行业通过Profinet转EthernetIP网关打通数据壁垒

在工业自动化领域,Profinet转Ethernet/IP是两种广泛应用的工业以太网协议。它们各自具有独特的特点和优势,而在实际应用中,经常需要实现这两种协议之间的互通,这时就需要使用到开疆智能Profinet转Ethernet/IP网关KJ-EIP-108。同时…

C++内存布局以及常用关键字

C内存布局以及常用关键字 C的内存空间 代码存储区域:常量区、代码区、静态区(全局区)、堆区、栈区 栈区向下增长,堆区向上增长。栈由系统管理,没有内存碎片,每个元素之间都是连续的,大小比较…

插入排序⁻⁻⁻⁻直接插入排序希尔排序

引言 所谓的排序,就是使一串记录按照其中的某个或某些关键字的大小,递增或递减的排列起来的操作。 常见的排序算法有: 今天我们主要学习插入排序的直接插入排序和希尔排序。 直接插入排序 什么是直接插入排序? 直接插入排序其…

Python实现中国象棋

探索中国象棋 Python 代码实现:从规则逻辑到游戏呈现 中国象棋,这款源远流长的棋类游戏,承载着深厚的文化底蕴与策略智慧。如今,借助 Python 与 Pygame 库,我们能够在数字世界中复刻其魅力,深入探究代码背后…

2024年12月6日Github流行趋势

项目名称:lobe-chat 项目维护者:arvinxx, semantic-release-bot, canisminor1990, lobehubbot, renovate项目介绍:一个开源的现代化设计的人工智能聊天框架。支持多AI供应商(OpenAI / Claude 3 / Gemini / Ollama / Qwen / DeepSe…

FastAPI 响应状态码:管理和自定义 HTTP Status Code

FastAPI 响应状态码:管理和自定义 HTTP Status Code 本文介绍了如何在 FastAPI 中声明、使用和修改 HTTP 状态码,涵盖了常见的 HTTP 状态码分类,如信息响应(1xx)、成功状态(2xx)、客户端错误&a…

AWS 机器学习,推动 AI 技术的健康发展

目录 一、AI 正在改变生产方式二、从炒作走向务实1、选对场景2、重视数据3、产品思维4、持续优化 三、人才是最稀缺的资源四、负责任的 AI 开发五、未来已来六、启示与思考七、结语 如果说传统软件开发是手工作坊,那么 AI 就像工业革命带来的机器生产。 在最新的一…

OceanBase 的探索与实践

作者:来自 vivo 互联网数据库团队- Xu Shaohui 本文总结了目前我们遇到的痛点问题并通过 OceanBase 的技术方案解决了这些痛点问题,完整的描述了 OceanBase 的实施落地,通过迁移到 OceanBase 实践案例中遇到的问题与解决方案让大家能更好的了…

Nginx安装和配置详解

1.Nginx的安装 1.1运行以下脚本安装 yum install yum-utils -y rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm# 查看所有可安装nginx版本 yum --showduplicates list available nginx yum install nginx-1.24.0 -y …

up主亲测,ToDesk/青椒云/顺网云这三款云电脑玩转AIGC场景

文章目录 1. 前言2. 云电脑性能分析3. 基础硬件数据3.1 硬件配置3.2 AI 评测跑分 4. 云电脑 AIGC 上手实测4.1 ToDesk4.1.1 AIGC 技术集成情况4.1.2 界面及功能4.1.3 项目部署4.1.4 黑神话悟空 AI 换脸4.1.6 AIGC 文生图体验 4.2 青椒云4.2.1 AIGC 技术集成情况4.2.2 界面及功能…

ARM架构-Cache的底层原理

在主存与处理器之间加入一个小容量的存储器保存 CPU 最近一段时间内的历史访问数据,将在 CPU 发起访问的时候优先提供数据快速访问,这个介于 CPU 与主存储器之间的小容量高速存储空间我们称之为 Cache,即高速缓存。Cache 作为处理器与主存之间…

Codeforces Round 991 (Div. 3) F. Maximum modulo equality(区间gcd模板)

思路&#xff1a;我们由题意可以知道我们只需要维护区间gcd即可&#xff0c;因为差分一下后&#xff0c;维护的差分数组的区间gcd即为原数组所要求的值 线段树维护 #include<bits/stdc.h>using namespace std;typedef long long ll; typedef pair<ll, ll>PII; co…

树与图深度优先遍历——acwing

题目一&#xff1a;树的重心 846. 树的重心 - AcWing题库 分析 采用暴力枚举&#xff0c;试探每个点&#xff0c;除去之后&#xff0c;连通分量最大值是多少&#xff0c; 各个点的最大值找最小的 因为可以通过 dfs 来得到 根u以下点数&#xff0c;以及可以求各分树的点数&am…

消息中间件-Kafka3-kafkaJavaClient小例

消息中间件-Kafka3-kafkaJavaClient小例 Kafak Java Client private static final String KAFKA_TOPIC "kafak-test";private static String bootstrapServers "localhost:9092";private static AdminClient client null;static {Properties config n…

团队管理中如何做好目标管理

团队管理中的目标管理是确保团队高效运行的核心要素之一。 在目标管理中&#xff0c;清晰的目标设定、合理的资源分配、实时的跟踪与反馈机制是成功的关键。首先&#xff0c;设定SMART目标&#xff08;具体、可衡量、可达成、相关性强、时间限定&#xff09;能够有效聚焦团队的…

【QT】一个简单的串口通信小工具(QSerialPort实现)

目录 0.简介 1.展示结果 1&#xff09;UI界面&#xff1a; 2&#xff09;SSCOM&#xff08;模拟下位机收发&#xff09;&#xff1a; 3&#xff09;VSPD虚拟串口驱动&#xff08;连接上位机和下位机的串口&#xff09;&#xff1a; 4&#xff09;实际收发消息效果及视频演…

灵途科技亮相2024世界传感器大会 分享光纤光源技术突破

12月1日至2日&#xff0c;2024世界传感器大会&#xff08;WSS&#xff09;在郑州国际会展中心隆重举办&#xff0c;泛自动驾驶领域光电感知专家灵途科技受邀参加“光纤传感器与激光雷达”分论坛&#xff0c;并在大会上带来《激光雷达用一体化光纤光源》专题演讲&#xff0c;同与…

12月第1周AI资讯

阅读时间:3-4min 更新时间:2024.12.2-2024.12.6 目录 OpenAI CEO Sam Altman 预告“12天OpenAI”系列活动 腾讯HunyuanVideo:130亿参数的开源视频生成模型 李飞飞的World Labs发布空间智能技术预览版 中科院联手腾讯打造“AI带货王”AnchorCrafter OpenAI CEO Sam Alt…

CentOS7.X 安装RustDesk自建服务器实现远程桌面控制

参照文章CentOS安装RustDesk自建服务器中间总有几个位置出错&#xff0c;经实践做个记录防止遗忘 一 环境&工具准备 1.1 阿里云轻量服务器、Centos7系统、目前最高1.1.11版本rustdesk-server-linux-amd64.zip 1.2 阿里云轻量服务器–安全组–开放端口&#xff1a;TCP(21…

图形开发基础之在WinForms中使用OpenTK.GLControl进行图形绘制

前言 GLControl 是 OpenTK 库中一个重要的控件&#xff0c;专门用于在 Windows Forms 应用程序中集成 OpenGL 图形渲染。通过 GLControl&#xff0c;可以轻松地将 OpenGL 的高性能图形绘制功能嵌入到传统的桌面应用程序中。 1. GLControl 的核心功能 OpenGL 渲染上下文&…