el-popover嵌套select弹窗点击实现自定义关闭功能
作者：徐_三岁
el-popover弹窗内嵌套下拉选择框,点击el-popover弹出外部区域需关闭弹窗,点击查询、重置需关闭弹窗,遇到这样的需求怎么解决呢,下面小编给大家介绍el-popover嵌套select弹窗点击实现自定义关闭功能,感兴趣的朋友一起看看吧
需求
el-popover弹窗内嵌套下拉选择框，点击el-popover弹出外部区域需关闭弹窗，点击查询、重置需关闭弹窗，
实现
根据需求要自定义弹窗的关闭和显示，首先想到的是visible属性，在实现过程中经过反复的测验，使用visible属性点击弹窗外部区域无法关闭弹窗。
转换思路使用el-popover的hide事件来实现自定义关闭，可满足上述需求
<el-popover ref="popoverRef" :offset="20" placement="bottom" trigger="click" > </el-popover>
const popoverRef= ref();
//关闭弹窗
const closePopover = function () {
popoverRef.value.hide();
};问题描述：在 el-popover 弹出框组件中嵌入 el-select 选择器组件后，点击 el-select 选择器选中选项后，不仅 el-select 选择器的选项弹框关闭了，外层 el-popover 组件的弹框也一并关闭了。
原因：el-popover 弹出框组件的关闭逻辑是当点击 popover 弹框以外的元素时，弹框就会关闭。然而 el-select 的 options 弹框默认是针对页面元素进行渲染的，而不是针对父元素渲染。也就是说， el-select 的 options 弹框不在 el-popover 弹出框上，点击options 弹框后会触发 popover 弹窗框的关闭条件，因此就会造成选择 el-select 选择器的选项后，外层的 el-popover 弹出框也会关闭。
解决方式：Select 选择器有一个属性 teleported，该属性可以控制 options 弹框的渲染位置。
<el-popover
ref="popoverRef"
:offset="20"
placement="bottom"
trigger="click"
>
<el-select v-model="value" placeholder="Select" :teleported="false" style="width: 240px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-popover>const value = ref('')
const options = [
{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
},
]到此这篇关于el-popover嵌套select弹窗点击实现自定义关闭的文章就介绍到这了,更多相关el-popover嵌套select弹窗内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！