element中popover弹框中有选择器,点击后popover消失的解决办法
element中有很多组件,经常用到的一个popover组件,很多时候大家都是使用它展示一些页面放不下或者不好放置的内容,很少在里面使用一些选择器,输入框等组件。
默认配置中,在使用到选择器组件时,一旦点击下拉选项,popover就会消失,这很明显不是我们想要的实现效果。
在hover=“click”的popover中,组件的显示与否,主要看鼠标click点击时的标签是否对应的弹出框中。如果不是的话就会隐藏,如果是的话,就不会隐藏,懂了这个逻辑,我们就应该去看一下官网是不是有对应的属性提供给我们。
可以看到,组建中的popperAppendToBody属性决定了对应的弹框append到哪个父节点上。
【element中popover弹框中有选择器,点击后popover消失的解决办法】默认的话是body,如果这个属性改成false就变成了append到对应的select标签下面。
这个时候点击下拉选项中的内容,也相当于是在对应的父弹框中点击,而不是append到body中的标签,自然刚刚打开的popover也就不会消失了。
可能描述的不够详细,代码配置其实也就一行。
:popperAppendToBody="false"
下面给出一个使用的例子
click 激活
有兴趣的同学可以对比下添加跟不添加这个属性时对应的DOM结构。
推荐阅读
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- 接口|axios接口报错-参数类型错误解决
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- vue|Vue面试常用详细总结
- javascript|vue使用js-xlsx导出excel,可修改格子样式,例如背景颜色、字体大小、列宽等
- css|我用css精灵图拼接了自己的英文名字,不会还有人不知道精灵图技术吧()
- css|css三角的做法及其案例