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-option
v-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 构造。