draggable的el-dialog实现对话框标题可以选择

请看图
在这里插入图片描述
这个对话框使用了el-dialog并且draggable属性设置成了true,所以标题栏这里就可以拖动,现在用户想选中标题栏的文本进而复制。我看到这个需求头都大了。
我能想到的方案有三个:1. 取消draggable为true 2. 标题文案后面加一个复制按钮 3. 标题栏中文案那块区域不触发移动操作

最终我选择了第3个,也是最难的。
首先我要知道el-dialog怎么实现拖拽功能,那就去源码里找了呗。
在这里插入图片描述
最终找到了这里,我只需要给标题中文本这个dom添加一个mousedown事件,让其阻止事件向上传播就可以了,说干就干。
给el-dialog添加一个ref,如下

<el-dialog ref="dialogRef"></el-dialog>

然后使用dialogRef找到标题文本对应的dom
在这里插入图片描述
dialogRef.value.$el.querySelector(‘.el-dialog__title’)

可惜失败了,dialogRef.value.$el竟然是一个注释,我的天塌了:(
在这里插入图片描述
然后又尝试使用dialogRef访问组件树,均以失败告终,真是头大呀!!!

就在我放弃的时候,我的小脑袋瓜突然开窍了,不能从上到下,我就从下到上。我在el-dialog中找到一个节点,给它加上ref,然后通过它向上找到el-dialog的dom,再往下找el-dialog__title
在这里插入图片描述
在这里插入图片描述
最后再改一下样式
在这里插入图片描述
打完收工:)

如果对你有帮助,请帮忙点赞哦,嘻嘻:)

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

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

相关文章

DeepSpeed-chat RLHF实战

轩辕-6bRLHF落地实战 模型介绍&#xff1a;轩辕-6B 模型库 (modelscope.cn) 1.1偏好数据集构建 ​ 1.1.1Prompt构建 1.1.2 Response生成 保证RM训练数据和测试数据分布一致 使用模型来生成response&#xff0c;为了评价response的质量&#xff0c;可以提高采样参数中的…

Java-05 深入浅出 MyBatis - 配置深入 动态 SQL 参数、循环、片段

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 大数据篇正在更新&#xff01;https://blog.csdn.net/w776341482/category_12713819.html 目前已经更新到了&#xff1a; MyBatis&#xff…

Prompting LLMs to Solve Complex Tasks: A Review

文章目录 题目简介任务分解未来方向结论 题目 促使 LLM 解决复杂任务&#xff1a; 综述 论文地址&#xff1a;https://www.intjit.org/cms/journal/volume/29/1/291_3.pdf 简介 大型语言模型 (LLM) 的最新趋势显而易见&#xff0c;这体现在大型科技公司的投资以及媒体和在线社…

恋爱通信史之完整性

在前面的章节中&#xff0c;介绍了对通信消息的加密&#xff0c;可以保证保密性(机密性)。虽说中间人无法解密通信消息的内容&#xff0c;但是可以篡改通信的消息。在接受者视角来看&#xff0c;是无法识别通信消息是否被篡改。因此&#xff0c;必须引入一种机制&#xff0c;保…

Easyexcel(5-自定义列宽)

相关文章链接 Easyexcel&#xff08;1-注解使用&#xff09;Easyexcel&#xff08;2-文件读取&#xff09;Easyexcel&#xff08;3-文件导出&#xff09;Easyexcel&#xff08;4-模板文件&#xff09;Easyexcel&#xff08;5-自定义列宽&#xff09; 注解 ColumnWidth Data…

C#调用C++ DLL方法之C++/CLI(托管C++)

托管C与C/CLI前世今生 C/CLI (C/Common Language Infrastructure) 是一种用于编写托管代码的语言扩展&#xff0c;它是为了与 .NET Framework 进行互操作而设计的。C/CLI 是 C 的一种方言&#xff0c;它引入了一些新的语法和关键字&#xff0c;以便更好地支持 .NET 类型和垃圾…

家庭智慧工程师:如何通过科技提升家居生活质量

在今天的数字化时代&#xff0c;家居生活已经不再只是简单的“住”的地方。随着物联网&#xff08;IoT&#xff09;、人工智能&#xff08;AI&#xff09;以及自动化技术的快速发展&#xff0c;越来越多的家庭开始拥抱智慧家居技术&#xff0c;将他们的家变得更加智能化、便捷和…

【Unity踩坑】出现d3d11问题导致编辑器崩溃

升级到Unity 6&#xff0c;有时出现下面这种D3D11的问题&#xff0c;会导致编辑器崩溃。 有人总结了这个问题的解决方法&#xff0c;可以做为参考&#xff1a; Failed to present D3D11 swapchain due to device reset/removed. List of Solutions - Unity Engine - Unity Dis…

CSP/信奥赛C++语法基础刷题训练(23):洛谷P1217:[USACO1.5] 回文质数 Prime Palindromes

CSP/信奥赛C语法基础刷题训练&#xff08;23&#xff09;&#xff1a;洛谷P1217&#xff1a;[USACO1.5] 回文质数 Prime Palindromes 题目描述 因为 151 151 151 既是一个质数又是一个回文数&#xff08;从左到右和从右到左是看一样的&#xff09;&#xff0c;所以 151 151 …

SCTransNet验证测试

SCTransNet 是PRCV 2024、ICPR 2024 Track 1、ICPR 2024 Track 2 三项比赛冠军方案的 Baseline, 同时也是多个优胜算法的Baselines. Bilibili 视频分享 【工作分享】SCTransNet:面向红外弱小目标检测的空间 - 通道交叉 Transformer_哔哩哔哩_bilibili 极市平台 推文分享 …

【C++】继承(inheritance)

引入 假设我们有一个动物类 class Animal { public:int age;void eat() {std::cout << "吃东西&#xff01;" << std::endl;} };又想写一个狗类&#xff0c;它也有年龄&#xff0c;也会吃&#xff0c;除此之外还有种类 class Dog { public:const char…

ThinkPad t61p 作SMB服务器,打印服务器,pc ,android ,ipad利用此服务器互传文件

1.在t61p上安装win7 2,配置好smb 服务 3.再安装好打印驱动程序 4.pc与win7利用系统的网络互相发现,映射为硬盘使用。 5.android&#xff0c;ipad安装ES文件浏览器访问win7 共享文件夹&#xff0c;互传文件。 6.android手机安装FE文件浏览器&#xff0c;可以利用花生壳外网…

Vue.js基础——贼简单易懂!!(响应式 ref 和 reactive、v-on、v-show 和 v-if、v-for、v-bind)

Vue.js是一个渐进式JavaScript框架&#xff0c;用于构建用户界面。它专门设计用于Web应用程序&#xff0c;并专注于视图层。Vue允许开发人员创建可重用的组件&#xff0c;并轻松管理状态和数据绑定。它还提供了一个虚拟DOM系统&#xff0c;用于高效地渲染和重新渲染组件。Vue以…

Hive基础面试-如何理解复用率的

1. 模型的复用率你们是怎么做的&#xff1f; 简单直白的说就是你的模型复用率如何&#xff0c;在业务方是否认可该模型&#xff0c;也是衡量模型建设的一个标准&#xff0c;复用率数&#xff1a;数仓模型涉及的核心是追求模型的复用和共享&#xff0c;引用系数越高&#xff0c;…

Excel - VLOOKUP函数将指定列替换为字典值

背景&#xff1a;在根据各种复杂的口径导出报表数据时&#xff0c;因为关联的表较多、数据量较大&#xff0c;一行数据往往会存在三个以上的字典数据。 为了保证导出数据的效率&#xff0c;博主选择了导出字典code值后&#xff0c;在Excel中处理匹配字典值。在查询百度之后&am…

鸿蒙学习笔记:初探UI开发

介绍了ArkUI相关内容&#xff0c;涵盖其基本概念&#xff0c;如组件、页面及二者作用。阐述了ArkUI主要特征&#xff0c;包括多态组件、多样布局等多方面能力。还讲解了声明式、类Web两种开发范式及适用场景。声明式开发范式从多维度提供UI能力&#xff0c;介绍了其基础能力、整…

OceanBase Shell开放内核运维接口,运维更便捷

DBA在日常业务中面临着繁琐的运维管理任务&#xff0c;亟需高效的工具和灵活的解决方案帮助他们简化操作、提升效率。因此&#xff0c;命令行操作和维护工具&#xff08;CLI工具&#xff09;&#xff0c;因其高效、灵活、可远程管理以及技术深度等特点&#xff0c;成为DBA和开发…

springboot配置https,并使用wss

学习链接 springboot如何将http转https 可借鉴的参考&#xff1a; springboot如何配置ssl支持httpsSpringBoot配置HTTPS及开发调试的操作方法springboot实现的https单向认证和双向认证(java生成证书)SpringBoot配置Https访问的详细步骤SpringBoot配置Https入门实践springboo…

高精度计算题目合集

高精度计算题目合集 1168&#xff1a;大整数加法 1168&#xff1a;大整数加法 1168&#xff1a;大整数加法 高精度加法原理&#xff1a; a&#xff0c;b&#xff0c;c 都可以用数组表示。这些都是基于c语言的算术运算符形成的运算。 c 3 ( c 1 c 2 ) % 10 c_3(c_1c_2)\%1…

Javaweb前端HTML css 整体布局

最后一个是线条颜色 盒子&#xff0c;整体还是300&#xff0c;400