vue解决element-ui中循环产生的popover中的内容手动点击完操作后隐藏

最新推荐文章于 2024-03-11 17:17:28 发布
最新推荐文章于 2024-03-11 17:17:28 发布
阅读量3.5k 收藏 3
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38203203/article/details/107202090
版权

1.想要功能--如下图：既点击弹窗中的列表项之后，弹窗popover隐藏

2.解决方法-没有使用回调时

在el-popover中加属性 :ref="popover-${scope.$index}"

在列表项中加 @click="scope.self.$refs[popover-${scope.$index}].doClose()"

 

3.解决方法-回调操作时(也适合el-popover中的内容直接用的子组件)

页面vue组件

methods方法

这里打印了scope参数

weixin_38203203
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-i18n结合Element-ui的配置方法
10-16
主要介绍了vue-i18n结合Element-ui的配置方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
element 表格 使用 popver 隐藏的解决办法
weixin_46352558的博客
12-08 347
table组件中使用el-Popover 很简单 在el-popover中加属性 :ref="`popover-${scope.$index}`" 取消el-button按钮加 @click="scope._self.$refs[`popover-${scope.$index}`].doClose()" 完美解决问题 转载 哈哈
element-plus踩坑，popover消失
最新发布
AloneQi的博客
03-11 828
teleported：控制是否将颜色选择器的 DOM 结构插入到 body 标签下，默认是 true，这里设置为 false 表示保留在父级元素内。解决方法：在取色器上添加。
element-demi:在Vue 2 3中使用Element UI的适配器
05-09
元素黛咪 一个在Vue 2/3中使用Element UI的适配器。 :yo-yo: 只是个玩具 该库旨在测试postinstall npm挂钩。 安装完所有软件包之后。 该脚本将开始检查已安装的Vue版本，并根据本地Vue版本将导出重定向到。 :package: 安装 // vue2.x + element-ui npm i element-demi element-ui # or yarn add element-demi element-ui // vue3.x + element-plus npm i element-demi element-plus # or yarn add element-demi element-plus :top_hat: 用法 Vue2 import Vue from 'vue' import ElementUI from 'element-demi' Vue . use ( Elemen
vue-element-admin中文版本
07-20
该资源为一个后台管理系统，为vue-element-admin在git下搭建而成
ElementUI解决循环出多个Popover点击其中一个则其他关闭
愤怒的阿木木的博客
04-30 4582
最近做项目遇到的一个问题 需要右击显示操作菜单，但是循环出来的el-Popover，右击其中一个时，其他显示的Popover并不会关闭，需求是同一时间右击只显示一个菜单 ** 解决： ** Popover的v-model赋值是 vsibles[index]，index是循环的索引，而vsibles是一个数组，在data中定义；@contextmenu.prevent是绑定右击触发事件，有需要可自行更改成@click <div v-for="(item,index) in createdSongLi
循环多个el-popover的手动显示/隐藏问题
qq_40407998的博客
08-06 1952
循环多个el-popover的手动显示/隐藏问题
vue3手动控制elementui的popover隐藏，触发popover隐藏
qq_46750192的博客
09-08 2243
我使用的是在表格单击行时关闭popover，很简单，就是将visible设置为false就可以了，不过，设置为了false，后面就没办法弹出popover，必须要设置为true，这样很难控制。而popover有一个hide隐藏事件，我们在这个事件里面将visible设置为null，切记不能设置为false或者true，不然就会影响下次点击的显示和影藏效果。点击table行，正常关闭，再次点击input正常弹出，且点击其他区域正常关闭，除了点击行，点击popover其他地方不会关闭。
vue解决element-ui popover点击取消时 popover的显示与隐藏问题
热门推荐
@必意玲
05-09 2万+
popover时点击取消时 popover的显示与隐藏问题 1. popover演示实现效果 最近在项目中使用 elementui 中的table组件popover进行开发，官网的案例如果使用数据遍历，操作列使用 <template></template> 做 插槽的话就不行了。 2. 解决办法如下 在el-popover中加属性 :ref="popover-${scop...
element-plus如何点击空白处关闭el-popover
young_superc的博客
08-06 4379
element-plus如何手动关闭el-popover
el-popover设置 :visible 手动关闭弹窗后，无法点击空白处关闭弹窗。
qq_41304029的博客
01-14 904
**点击空白处隐藏 *//**提交方法 */
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本
毕业设计项目-个人博客。前端基于Vue，Element-UI和Vue-Element-Admin实现，后台采用SpringBoot+MybatisPlus+Rd
07-09
毕业设计项目-个人博客。前端基于Vue，Element-UI和Vue-Element-Admin实现，后台采用SpringBoot+MybatisPlus+Rdis等技术实现。
vue-element-nocode-admin:element-ui 的代码可视化编辑
05-06
element-ui 的代码可视化编辑器，自动生成表单代码，列表代码。不是一个可视化解决方案，更像是生成模板的工具 :house: 网页版本，在preview分支 Install npm install -g ele-cli How to Use 服务端占用 3000 端口 ...
elementui中popover遇上dialog的隐藏显示问题
weixin_42380568的博客
03-21 2164
当popover使用【click方式】激活的时候，这时，你又打开了一个dialog，诡异的现象发生了，你在dialog空白处点击的时候，下面的popover就隐藏了。 这时可以使用el-popover的manual模式(手动) <el-popover placement="bottom" trigger="manual" v-model="visible_2"> <div class="popover_box"> <workOrderFilter&
Popover嵌套select 点击下拉导致外部Popover消失
qq_46468347的博客
09-12 679
2.3.8之前使用:popperAppendToBody="false" 防止关闭。使用teleported属性 防止外部Popover关闭。"element-plus": "^2.3.8",使用。
element中popover弹框中有选择器，点击后popover消失的解决办法
伯约同学的前端学习之路
01-20 6568
element中popover弹框中有选择器，点击后popover消失的解决办法 element中有很多组件，经常用到的一个popover组件，很多时候大家都是使用它展示一些页面放不下或者不好放置的内容，很少在里面使用一些选择器，输入框等组件。 默认配置中，在使用到选择器组件时，一旦点击下拉选项，popover就会消失，这很明显不是我们想要的实现效果。 在hover=“click”的popover中，组件的显示与否，主要看鼠标click点击时的标签是否对应的弹出框中。如果不是的话就会隐藏，如果是的话，就不会
el-popover中嵌套弹窗，点击选择时，弹出层就关闭的解决方法
weixin_42190844的博客
09-13 5459
因为业务需要，所以使用的弹出层里还需要嵌套弹窗。我这里的弹出层绑定了v-model。手动控制popover的显示隐藏。 正常想法就是，在点击选择时，在选择的方法里，this.popover_visible = true 让弹出层显示。 但是一直没有效果。 查阅了一下资料，el-popover是会根据body的点击事件来进行显隐的。如果点击了非弹出层包裹的内容，那么弹出层就会关闭。 所以，我弹框的选择按钮，应该是点击的时候冒泡了。这时候只要 将click事件 加上stop修饰符。如@click.s.
循环出来的Elementui中的Popover弹出框，如何在外部触发Popover的弹出事件
CSND7997的博客
05-14 8155
Elementui的Popover基本使用，下面链接为官网介绍，就不做重复介绍了 关于Elementui基本使用，官网地址 重点：Popover的显示方法为doShow() 遇到的问题：Popover弹出框是循环出来的，如图 点击增加按钮让数组增加，所以弹出框也会增加，但不会触发点击事件，需求：增加按钮之后，同时出发Popover的点击事件 解决方案：给这个dom节点添加ref属性，在methods中 会打印出来循环出来所有的Popover，因为我用的添加数组的方法是，this.arr.splice(t
vue element-ui 全局添加popper-append-to-body属性
04-13
回答：您可以使用Vue.mixin方法全局添加popper-append-to-body属性，具体方法如下： 1. 在项目中新建一个mixin.js文件 2. 在mixin.js文件中编写如下代码： import Vue from 'vue'; import ElementUI from 'element-ui'; Vue.mixin({ mounted() { ElementUI.LoadingBar.config({ color: '#5cb85c', failedColor: '#f0ad4e', }); } }); 3. 在main.js文件中引入mixin.js文件： import './mixin.js'; 4. 然后在你的popper组件上加上popper-append-to-body属性即可，如下所示： <el-popover trigger="click" popper-append-to-body>A popover</el-popover>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值