element中popover弹框中有选择器,点击后popover消失的解决办法
element中popover弹框中有选择器,点击后popover消失的解决办法
element中有很多组件,经常用到的一个popover组件,很多时候大家都是使用它展示一些页面放不下或者不好放置的内容,很少在里面使用一些选择器,输入框等组件。
默认配置中,在使用到选择器组件时,一旦点击下拉选项,popover就会消失,这很明显不是我们想要的实现效果。
在hover=“click”的popover中,组件的显示与否,主要看鼠标click点击时的标签是否对应的弹出框中。如果不是的话就会隐藏,如果是的话,就不会隐藏,懂了这个逻辑,我们就应该去看一下官网是不是有对应的属性提供给我们。
可以看到,组建中的popperAppendToBody属性决定了对应的弹框append到哪个父节点上。
默认的话是body,如果这个属性改成false就变成了append到对应的select标签下面。
这个时候点击下拉选项中的内容,也相当于是在对应的父弹框中点击,而不是append到body中的标签,自然刚刚打开的popover也就不会消失了。
可能描述的不够详细,代码配置其实也就一行。
:popperAppendToBody="false"
下面给出一个使用的例子
<el-popover placement="right" width="400" trigger="click"><div><el-select:popperAppendToBody="false"v-model="value"placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></div><template #reference><el-button>click 激活</el-button></template></el-popover>
有兴趣的同学可以对比下添加跟不添加这个属性时对应的DOM结构。
element中popover弹框中有选择器,点击后popover消失的解决办法相关推荐
- element的popover弹框中有选择器,点击后popover消失的解决办法
组件中的popperAppendToBody属性决定了对应的弹框append到哪个父节点. 默认的是body,如果这个属性改成false就变成了append到对应的select标签下面. 解决方法:在 ...
- VUE+Element中eldialog弹框控制最小宽度
<template><div><div><el-button @click="dialogFormVisible=true">打开& ...
- 双击程序后系统弹框“您无权访问此程序”的解决办法
xp下:我的电脑>工具>文件夹选项>查看,勾掉使用简单文件共享选项.如下图: 此时,在右键点击程序图标时,选项卡中会出现"安全"选项卡.如下图: 修改everyo ...
- Android WebView获取网页中JavaScript弹框内容
Android WebView获取网页中JavaScript弹框内容 网页中弹窗的js代码为 <script type="text/javascript" language= ...
- java弹窗 触发事件_关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法...
好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...
- 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法...
好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...
- 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法
关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法 参考文章: (1)关于ElementUI中MessageBox弹框的取消键盘触发 ...
- js中唤醒弹框的3种方式
js中唤醒弹框的3种方式 1.alert() 警告框,只有确定按钮,常用于确保用户可以得到某些信息.需点击确定按钮才能继续操作. alert("ss") 2.confirm() 确 ...
- element-ui中message弹框提示的使用
element-ui中message弹框提示的使用 1.按需导入的element-ui中的message import { Message } from 'element-ui' 2.进行全局挂载: ...
最新文章
- mysql修改表、字段、库的字符集(转)
- [詹兴致矩阵论习题参考解答]习题3.6
- 我的第三个jquery插件——promptForK13内容提示插件
- SharePoint视图过滤中People字段的局限
- nginx的内存管理
- 软件工程开发之道:了解能力和复杂度是前提
- Android Task 相关
- Oracle分页查询
- 高效记忆/形象记忆(14)110数字编码表 81-90
- 基于偏微分方程的图像分割(二)Snake模型 Matlab实现
- 基于canoe 新建一个lin工程_详细步骤讲解如何在CANoe中创建一个LIN通讯工程(多图+详解)...
- 计算机考研需要过英语六级吗,研究生毕业要过英语六级吗 研究生毕业对英语六级有要求吗...
- springcloud入门——config分布式配置中心
- Python用win32模块让窗体闪烁!附源码
- wince 百度地图懒人包_百度地图winCE版 V10.9.2 安卓版
- 剑指offe系列之6:旋转数组的最小值
- JS删除数组里的某个元素方法
- i7z – 用来查看CPU状况
- Access在win10连接失败问题
- 11 个简单的 Java 性能调优技巧