最近做项目遇到的一个问题

需要右击显示操作菜单，但是循环出来的el-Popover，右击其中一个时，其他显示的Popover并不会关闭，需求是同一时间右击只显示一个菜单
**

解决：

**
Popover的v-model赋值是 vsibles[index]，index是循环的索引，而vsibles是一个数组，在data中定义；@contextmenu.prevent是绑定右击触发事件，有需要可自行更改成@click

<div  v-for="(item,index) in createdSongLists"><el-popover  placement="right" trigger="contextmenu" :width="180" v-model:visible="visibles[index]" >...<template #reference><div @contextmenu.prevent="visiblePopover(createdSongLists.length,index)">...</div></template></el-popover></div>

 data() {return {visibles: [],}},


visiblePopover(length,index) {for(let i=0;i<length;i++){if(i != index){this.visibles.splice(i, 1, false);}else{this.visibles.splice(index, 1, true);}}

ElementUI解决循环出多个Popover点击其中一个则其他关闭相关推荐

element-ui 解决循环出多个el-popover点击其中一个则其它都关闭
element-ui解决循环出多个el-popover点击其中一个则其它都关闭一.主要代码当循环出来的多个popover时,点击其中一个,可能关闭了所有的解决方法: 1.v-model绑定一个数 ...
微信小程序使用for循环展示图片，如果点击其中一个怎么获取该图片的src
在小程序中使用循环来展示图片时,可以使用 wx:for 指令.在使用 wx:for 指令时,可以使用变量来控制当前循环项. 举个例子,如果要循环展示图片列表,可以这样写: <view wx:fo ...
Spring循环依赖问题，Spring是如何解决循环依赖的？
文章目录一.什么是循环依赖 1.代码实例 2.重要信息二.源码分析 1.初始化Student 对Student中的ClassRoom进行Autowire操作 2.Student的自动注入Class ...
Java头文件找出循环依赖_Node.js 如何找出循环依赖的文件？如何解决循环依赖问题？...
本文重点是讲解如何解决循环依赖这个问题.关心这个问题是如何产生的,可以自行谷歌. 如何重现这个问题 // a.js const {sayB} = require('./b.js') sayB() fu ...
图解Spring解决循环依赖
点击上方蓝色"方志朋",选择"设为星标"回复"666"获取独家整理的学习资料! 来源:juejin.cn/post/684490412216 ...
高频面试题：Spring 如何解决循环依赖？
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料在关于Spring的面试中,我们经常会被问到一个问题:Spring ...
面试问你Spring如何解决循环依赖的时候，不要一脸懵逼了！
点击上方"方志朋",选择"设为星标" 做积极的人,而不是积极废人来源:http://h5ip.cn/AXHC 在关于Spring的面试中,我们经常会被问到一个 ...
【C++】智能指针简述(五):解决循环引用的weak_ptr
总结一下前文内容: 1.智能指针通过RAII方法来管理指针:构造对象时,完成资源初始化;析构对象时,对资源进行清理及汕尾. 2.auto_ptr,通过"转移所有权"来防止析构一块内 ...
python垃圾回收机制为什么标记能解决循环引用问题_Python 垃圾回收机制和如何解决循环引用...
引用计数:是一种垃圾收集机制,而且也是一种最直观,最简单的垃圾收集技术, 当一个对象的引用被创建或者复制时,对象的引用计数加 1:当一个对象的引用被销毁时,对象的引用计数减 1:当对象的引用计数减少为 ...

ElementUI解决循环出多个Popover点击其中一个则其他关闭

解决：

ElementUI解决循环出多个Popover点击其中一个则其他关闭相关推荐

最新文章

热门文章