管局备案网站,新增病例最新消息,智能logo设计网站,做商城网站费用请看图 这个对话框使用了el-dialog并且draggable属性设置成了true#xff0c;所以标题栏这里就可以拖动#xff0c;现在用户想选中标题栏的文本进而复制。我看到这个需求头都大了。 我能想到的方案有三个#xff1a;1. 取消draggable为true 2. 标题文案后面加一个复制按钮 …请看图 这个对话框使用了el-dialog并且draggable属性设置成了true所以标题栏这里就可以拖动现在用户想选中标题栏的文本进而复制。我看到这个需求头都大了。 我能想到的方案有三个1. 取消draggable为true 2. 标题文案后面加一个复制按钮 3. 标题栏中文案那块区域不触发移动操作
最终我选择了第3个也是最难的。 首先我要知道el-dialog怎么实现拖拽功能那就去源码里找了呗。 最终找到了这里我只需要给标题中文本这个dom添加一个mousedown事件让其阻止事件向上传播就可以了说干就干。 给el-dialog添加一个ref如下
el-dialog refdialogRef/el-dialog然后使用dialogRef找到标题文本对应的dom dialogRef.value.$el.querySelector(‘.el-dialog__title’)
可惜失败了dialogRef.value.$el竟然是一个注释我的天塌了:( 然后又尝试使用dialogRef访问组件树均以失败告终真是头大呀
就在我放弃的时候我的小脑袋瓜突然开窍了不能从上到下我就从下到上。我在el-dialog中找到一个节点给它加上ref然后通过它向上找到el-dialog的dom再往下找el-dialog__title 最后再改一下样式 打完收工:)
如果对你有帮助请帮忙点赞哦嘻嘻:)
