el-popover如何通过js手动控制弹出框显示、隐藏
更新时间：2023年12月12日 14:52:42 作者：MtiredM
最近项目中多次用到了Popover弹出框,下面这篇文章主要给大家介绍了关于el-popover如何通过js手动控制弹出框显示、隐藏的相关资料,需要的朋友可以参考下
说明
element ui 2.x中，el-popover的显示隐藏有4种触发方式：click/focus/hover/manual，分别是点击/聚焦/悬浮/手动，正常情况这几个触发方式已经能满足大部分需求，但有些业务场景需要通过代码自动触发弹框展示
例如：在后台请求响应返回后，自动打开弹框展示内容，这时我们如果使用的click（click已验证，focus/hover未验证）触发方式，则无法通过js显示弹框
如果使用manual触发方式，主动添加点击事件，可以通过js显示弹框，但无法实现点击空白处关闭弹框，但此方案已基本接近最终需求，针对点击空白处关闭提供全局点击事件处理即可，具体示例如下：
代码示例
<el-popover
ref="myPopover"
:value="showPopover"
placement="bottom"
width="550"
trigger="manual"
:open-delay="500"
@show="openPopover"
@hide="closePopover"
>
<el-table>....弹框展示内容...</el-table>
<el-tooltip slot="reference" content="弹框展示" effect="dark" placement="bottom">
<!-- 主动点击实现弹框展示关闭 -->
<span class="hover-effect" @click="trigger">
<svg-icon icon-class="popover1" />
</span>
</el-tooltip>
</el-popover>
data() {
return {
showPopover: false
}
},
methods: {
trigger() {
//点击控制弹框展示/关闭
this.showPopover= !this.showPopover
},
openPopover() {
//弹框展示时注册全局点击事件
document.addEventListener('click', this.hidePopover, false)
},
closePopover() {
//弹框关闭时移除全局点击事件
document.removeEventListener('click', this.hidePopover, false)
},
hidePopover(e) {
// 全局点击事件，检测当前点击位置不包含弹框的元素，则隐藏弹框
if (!this.$refs.myPopover.$el.contains(e.target)) {
this.showPopover= false
}
}
}总结
到此这篇关于el-popover如何通过js手动控制弹出框显示、隐藏的文章就介绍到这了,更多相关el-popover手动控制弹出框显示隐藏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue+elementui实现拖住滑块拼图验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue如何使用window.open打开页面并拼接参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
vue3使用wangeditor封装和自定义上传文件官方教程
这篇文章主要为大家介绍了vue3使用wangeditor封装和自定义上传文件的官方教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2023-06-06
这篇文章主要介绍了深入理解Vue.js轻量高效的前端组件化方案 ,需要的朋友可以参考下2018-12-12
在前端开发中我们通常会遇到这样的需求,用户离开、刷新页面前,修改数据未进行保存操作,需要提示框提醒用户,这篇文章主要给大家介绍了关于vue监听浏览器网页关闭和网页刷新事件的相关资料,需要的朋友可以参考下2023-08-08
这篇文章主要为大家介绍了一些Vue.js表单控件绑定示例盘点，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
vite+vue3项目解决低版本兼容性问题解决方案(Safari白屏)
这篇文章主要介绍了vite+vue3项目解决低版本兼容性问题（Safari白屏）,使用官方插件 @vitejs/plugin-legacy 为打包后的文件提供传统浏览器兼容性支持,本文给大家介绍的非常详细,需要的朋友可以参考下2024-03-03
解决vant title-active-color与title-inactive-color不生效问题
这篇文章主要介绍了解决vant title-active-color与title-inactive-color不生效问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue项目打包:修改dist文件名方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
在我们开发中，经常要用到Vue.extend创建出Vue的子类来构造函数，通过new 得到子类的实例，然后通过$mount挂载到节点，今天通过本文给大家讲解手写vm.$mount方法 ，感兴趣的朋友一起看看吧2022-11-11
最新评论