el-dialog内文字无法复制和选中的坑

最新推荐文章于 2024-07-29 10:54:04 发布

dontstayup

最新推荐文章于 2024-07-29 10:54:04 发布

阅读量895

点赞数

文章标签：前端 vue.js elementui

本文链接：https://blog.csdn.net/dontstayup/article/details/127495267

版权

el-dialog sortablejs 冲突解决前端开发 JavaScript

关键词由CSDN通过智能技术生成

测试刚才跟我说，弹框里的文字怎么没法选中？然后转头给我建了个sub-bug，留下我对着代码一筹莫展。

布局是这样的，dialog下面是个表格，且是一个使用了sortablejs的可拖拽表格。突然发现试图选中文字时弹框会莫名其妙的消失，然后会触发拖拽，这是el-dialog和sortablejs冲突了？

一开始试图用z-index增大el-dialog的层叠，结果失效了，然后又去翻elementui文档，发现el-dialog有个append-to-body，描述是这样的：

我好像明白了，是因为sortablejs和el-dialog处在了同一层上导致了二者的冲突，果断加上这个属性设置为true，搞定，bug解决

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dontstayup

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue+elementUI实现点击表格中某一个单元格进行复制其内容

weixin_42461079的博客

01-05

2713

vue+elementUI实现点击表格中某一个单元格进行复制其内容在下面案例中复制的是链接这一列 1.安装插件vue-clipboard2 npm install vue-clipboard2 --save 2.在main.js中引入 import Vue from ‘vue’ import VueClipboard from ‘vue-clipboard2’ Vue.use( VueClipboard ) 3.在页面中使用在template中： <el-table-column label

弹窗拖拽+水平方向伸缩（弹框无法选中文字）

weixin_44274094的博客

09-07

659

【代码】弹窗拖拽+水平方向伸缩。

1 条评论您还未登录，请先登录后发表或查看评论

elemen-ui的table 组件的表头没办法复制问题

weixin_45438028的博客

11-04

2102

解决elemen-ui的table 组件的表头没办法复制问题。

element+vue2项目el-dialog弹窗显示的同时操作页面其他内容

最新发布

wsdnnnnnnnnn的博客

07-29

362

项目中遇到一个需求就是在弹窗显示的同时，可以操作页面内的其他元素，比如点击其他元素，显示其他弹窗。在弹窗出现的时候不能点击其他区域，是因为弹窗外面包裹了一层z-index数值比较大的div盒子，想要点击首先需要给el-dialog的遮罩层去掉，并且点击遮罩层不让弹窗消失。将该div的z-index层级数值改的小一点就可以了。

element-ui之el-dialog弹框内容无法复制的问题解决，el-dialog弹框内容不等复制，el-table表格内容无法复制问题

海贼王某人的博客

01-06

2325

element-ui之el-dialog弹框内容无法复制的问题解决，el-dialog弹框内容不等复制，el-table表格内容无法复制问题看一下解决后的效果，内容是可以被复制的，之前是无法复制的，看一下问题就出在下面这窜代码上，吧这个代码注释掉就可以复制了，相对的，如果不希望内容被复制的话，就加上这个属性user-select: none;这个代码的意思就是样式内的元素将无法被选中，也就是不能复制。

el-dialog 弹出层实现拖拽、拉伸、双击全屏效果

既然青春留不住，还是做个大叔好!

03-09

661

// 指令1 仅实现拖拽的效果 export default { bind(el, binding, vnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = el.querySelector('.el-dialog') dialogHeaderEl.style.cssText += ';cursor:move;' dragDom.style.cssText

sortablejs拖拽粘贴复制问题

weixin_62050403的博客

08-03

1161

sortablejs拖拽粘贴复制问题

解决element-ui表格添加show-overflow-tooltip后鼠标移入无法复制内容的问题

Jayshon_Jaa的博客

02-11

1551

在element ui的表格组件中，当表格内容超过列宽后，可以使用show-overflow-tooltip属性设置悬浮内容，但是当鼠标移入到悬浮窗时，悬浮窗却直接消失，从而导致超过列宽的内容无法复制。element官方表示没有修复此问题的计划，但是实际上产品又确确实实有这个需求，因此我们可以使用第三方库来解决这个问题。

VUE+elementUI实现弹窗（dialog）编辑某条数据

热门推荐

王魂风气的博客

11-11

1万+

最近要使用VUE+elementUI的框架，我开始学习了vue的知识，在写demo实现弹窗编辑表格数据的时候遇到了一个问题：弹窗中的数据不知道怎么传到对应的表格中去，网上搜了一大堆，都是粘贴复制的，只实现了打开弹窗，弹窗获取表格中数据，而没有实现怎么把弹窗中的值写入到表格中。经过摸索，最后我终于实现了，完整代码如下： <template> <div id="app" sty...

vue - element 中 el-table自定义弹窗

weixin_33937778的博客

04-18

3083

两种方法： 1.文中加入组件（繁琐，每个弹窗都要对应有自己的组件） 2.render组件严格说第二种是第一种的优化（文章记录过程）过程： el-table-column :render-header="renderHeader" -> 利用renderHeader创建自定义点击样式和弹窗基本思路： el-table提供的render-header渲染表头，rendersta...

vue+element+viewer的图片上传，预览，删除，编辑图片链接文字，限制上传最大数

weixin_44897405的博客

12-04

1156

先上图：

vue+element弹窗可拖拽拉伸和弹窗内table高度自适应

李墨瞳的博客

12-10

3462

vue+element的弹窗，自定义指令实现弹窗可拖拽拉伸。解决因为拉伸事件导致的无法选中弹窗里表单文字的问题。添加了边界判断条件，不允许拖到可视范围之外了。添加了弹窗如果有表格，对表格进行自适应的功能

Dialog 的标题title属性用slot实现。（复制功能）

qq_56715703的博客

09-01

608

当你的标题内容需要一些除了文字以外的功能，比如复制按钮，那么就需要用slot传入。whitelistId是个变量，点击事件传入此值，调用以下方法即可复制。

elementUI 使用了sortablejs之后 el-table表格中的 input 框里的文字不能选中复制问题

菜同学的博客

02-22

1992

给表格绑定动态的列名，在 input 框上绑定 focus 和 blur 事件动态改变列名，在初始化 sortablejs 时使用 handle属性来控制可以通过哪些地方来进行拖动。

element表格数据复制

锋声的博客

12-22

1828

效果图如下代码如下 <el-table-column label="appId" prop="id"> <template slot-scope="scope"> <el-popover placement="top" width="100" popper-class="copy-popper" trigger="hover"> <el-link type="text" @click="copy(scope.row)">点击复制&l

el-input遇到的问题

qq_40586654的博客

03-27

840

在之前的开发项目中需求（只能输入数字不能输入小数点），我在网上查阅了好多方式方法，好多都没能实现我想要的结果；一、实现思路 1,实现只能输入数字 <el-input size="mini" type="number" v-model="value" /> 2,但是上面这样处理，测试发现能输入字母"e",还可以输入小数点 <el-input size="mini" type="number" v-model="value" @keydown.native="inputKe

el-table 表头无法选择复制

Kyiiiii的博客

03-20

2306

el-table 表头复制问题

实现element-ui中dialog的拖拽

qq_40411455的博客

01-14

1026

1、utils文件夹下创建dialog.js文件 import Vue from 'vue' // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__head...

element表格复制一列

joy_1004的博客

06-08

593

element表格中复制一列数据

el-dialog 内嵌入 el-autocomplete 选中一个选项后，怎么禁止el-dialog自动关闭

04-18

要禁止el-dialog在el-autocomplete选中一个选项后自动关闭，你可以通过以下步骤实现： 1. 在el-dialog组件上添加一个`@close`事件监听器，用于捕获对话框关闭的事件。 2. 在el-autocomplete组件上添加一个`@select`事件监听器，用于捕获选中选项的事件。 3. 在`@select`事件处理程序中，使用`event.stopPropagation()`方法来阻止事件冒泡，从而阻止el-dialog组件的`@close`事件被触发。下面是一个示例代码： ```html <template> <el-dialog :visible.sync="dialogVisible" @close="handleDialogClose"> <el-autocomplete v-model="selectedOption" :fetch-suggestions="fetchSuggestions" @select="handleAutocompleteSelect">  </el-autocomplete> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, selectedOption: '', // 其他数据... }; }, methods: { fetchSuggestions(queryString, callback) { // 获取选项列表的逻辑... }, handleDialogClose() { // 对话框关闭的处理逻辑... }, handleAutocompleteSelect(item) { // 选中选项的处理逻辑... event.stopPropagation(); // 阻止事件冒泡 }, }, }; </script> ``` 这样，当你在el-autocomplete组件中选择一个选项时，el-dialog组件不会自动关闭。你可以根据自己的需求在`handleAutocompleteSelect`方法中添加其他逻辑。