循环多个el-popover的手动显示/隐藏问题

最新推荐文章于 2024-04-18 16:39:49 发布

蜗牛与藤曼

最新推荐文章于 2024-04-18 16:39:49 发布

阅读量1.9k

点赞数 2

分类专栏： VUE 文章标签： javascript vue elementui

本文链接：https://blog.csdn.net/qq_40407998/article/details/126196921

版权

VUE 专栏收录该内容

36 篇文章 4 订阅

订阅专栏

循环多个el-popover的手动显示/隐藏问题

<div v-for="item in dataList" :key="item.id">
	<el-popover
	          :ref="'popoverRef_' + item.id"
	          placement="right-start"
	          width="200"
	          trigger="click">
	          <el-button slot="reference" size="mini" type="primary">按钮<i class="el-icon-d-arrow-right el-icon--right"></i></el-button>
	          <div>
	            测试111111111111111
	          </div>
	   </el-popover>
</div>

关闭某个popover代码

this.$refs['popoverRef_' + item.id][0].doClose() // 关闭
this.$refs['popoverRef_' + item.id][0].doShow() // 打开

关注博主即可阅读全文

优惠劵

蜗牛与藤曼

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
循环多个el-popover的手动显示/隐藏问题

循环多个el-popover的手动显示/隐藏问题
复制链接

扫一扫

专栏目录

element中的Popover提示框如何循环使用

JCat的博客

12-04

8599

前言很久没有写博客了，总结一下前几天遇到的一个需求中的知识点吧，element 中的Popover提示框在表格或ul页面中如何循环使用；在用Popover提示的时候遇见了几个问题，记录一下；正文一、解析官方popover的使用方法官网：element-popover <el-popover placement="bottom" title="标题" wid...

react-popover：一个用于React的智能popover组件

02-26

React弹出 React版本支持 react-popover >= 0.5.0支持React 16，而react-popover < 0.5.0适用于React 15.xx ，可能更低。... 仅在有多个可用配合的情况下用于指定放置位置才有用。默认为null

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

Element-UI表格嵌入popover出现的问题以及解决方案

coder_xiaobai的博客

04-05

3864

6. 第5个问题还存在，在显示弹窗的div中加入v-if语句控制，写入全局变量vis，初始值为false，当数据为空时，vis为false不显示，数据传入时vis设为true，显示，控制语句在第二个代码块的cellEnter方法中。7.熬到现在已经过了两天，popover显示仍然有问题，弹窗的div在popover上面，popover有自己的样式，因此用自定义样式:popper-class修改样式，并且用全局变量vis控制显示的时机，这里这样写会出现一个警告。我这里使用了popover展示弹窗。

el-popover和v-for一起使用时出现多个弹窗同时显示。

qq_43440659的博客

11-02

2000

给标签加上:append-to-body="false"属性即可

el-popover使用时想手动设置弹起隐藏

热门推荐

halo1416的博客

07-17

1万+

前言：今天有一个需求，一个列表中每一行都会有一个element-ui的popover 弹窗，使用click或者hover触发；但是，这个组件自身不会自动关闭，处理手动点击页面其他地方。使用需要对这一现象进行处理，使用doClose() 方法。第一步：给每一个el-popover标签添加一个key唯一标识的ref 第二步：在每次点击、hover触发el-popover时（clic...

element-ui 解决循环出多个el-popover点击其中一个则其它都关闭

MISS_zhang_0110的博客

06-10

3946

element-ui解决循环出多个Popover点击其中一个则其它都关闭

el-popover在v-for 循环中的使用与优化

小新的博客

08-24

1万+

el-popover 在 v-for 中的基础使用 <div v-for='item in 100'> <el-popover placement="bottom" title="标题" width="200" trigger="click" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"> <el-button slot="reference

elment-ui table固定列el-popover出现多个

是夜色太荒芜的专栏

06-27

2928

table固定列el-popover出现多个解决办法:ref="popover-${data.id}" 触发popover时设置document.getElementById(this.refs[key].refs[key].refs[key].refs.popper.id).style.display = ‘none’ <el-popover v-model="data.popShow" v-permission="permission.del"

element 表格里，每一行都循环使用el-popover组件，关闭按钮失效问题如何解决？

浮生的博客

03-02

1310

代码如下，拿去就用： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style> .item:hover

react-native-popover-view：经过测试，适应性强，轻量级本机组件

02-05

React本机弹出视图经过测试的，适应性强的轻量级<Popover>组件，用于本机响应。经过测试并可以在iOS和Android上使用。...import Popover from ' react-native-popover-view ' ;function App () { return (

react-popover:完全控制的Popover组件

05-06

React简单的弹出窗口基于完全控制的Popover组件。安装 $ npm install react-simple-popover用法import Popover from 'react-simple-popover' ;import React , { Component } from 'react' ;class PopoverDemo ...

react-popover

05-07

Popover React组件安装 npm install --save @idui/react-popover yarn add @idui/react-popover 好处完全容易定制。它有很多道具，包括动画，className，箭头可见性等。使用样式化组件进行样式化。能够根据...

react-native-modal-popover：使用Modal的React-Native纯JS popover

02-05

纯JS popover组件，用于本机关于本模块原始的现在已过时，因此我决定发布自己的模块，以避免在package.json中使用github url。在重写过程中有些东西丢失了，但是现在它使用了Modal和本机动画驱动程序，并且还具有...

多个el-popover点击不弹窗问题

qq_41429765的博客

05-13

757

el-popover不可用v-if设置隐藏只能用v-show <el-popover placement="bottom" width="260" trigger="click" :ref="`node-popover-${scope.$index+scope.row.cardId}`" display="flex" flex-wrap="wrap"> <span v-for="(item,index) in list" :key="index" style="ma

使用element中el-popover组件手动控制开关的特殊方式

weixin_56663184的博客

05-11

1667

方法一：使用组建的手动激活方式，通过visible属性真假来控制 <el-popover placement="top" width="160" v-model="visible"> <p>这是一段内容这是一段内容确定删除吗？</p> <div style="text-align: right; margin: 0"> <el-button size="mini" type="text" @click="visible =

循环后el-popover点击无反应不弹出

weixin_44894555的博客

10-25

1460

循环后el-popover点击无反应不弹出

el-popover事件控制显示隐藏

05-26

el-popover 组件提供了两个事件用于控制它的显示和隐藏：`show` 和 `hide`。你可以在元素上使用 `v-on` 指令监听这两个事件，然后在触发时调用相应的方法来控制 el-popover 的显示和隐藏。例如，在下面的代码中，我们为一个按钮绑定了 `showPopover` 方法，该方法用于在按钮上触发 `show` 事件，从而显示 el-popover 组件： ```html <template> <div> <el-button v-on:click="showPopover">显示 el-popover</el-button> <el-popover ref="popover" title="标题" width="200"> <p>这是 el-popover 的内容</p> </el-popover> </div> </template> <script> export default { methods: { showPopover() { this.$refs.popover.$emit('show') } } } </script> ``` 同样，我们可以为 el-popover 组件绑定 `hidePopover` 方法，该方法用于在 el-popover 上触发 `hide` 事件，从而隐藏组件： ```html <template> <div> <el-button v-on:click="showPopover">显示 el-popover</el-button> <el-popover ref="popover" title="标题" width="200" v-on:hide="onHide"> <p>这是 el-popover 的内容</p> </el-popover> </div> </template> <script> export default { methods: { showPopover() { this.$refs.popover.$emit('show') }, hidePopover() { this.$refs.popover.$emit('hide') }, onHide() { console.log('el-popover 隐藏了') } } } </script> ``` 在上面的代码中，我们为 el-popover 组件绑定了 `onHide` 方法，该方法用于在组件隐藏时打印一条消息。当点击按钮触发 `show` 事件显示 el-popover 后，我们再次点击按钮触发 `hide` 事件，从而隐藏组件。在组件隐藏时，会触发 `v-on:hide` 监听器并执行 `onHide` 方法，从而打印出一条消息。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交