天津网站建设包括哪些苏州seo推广

请看图

这个对话框使用了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


最后再改一下样式

打完收工:)

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