需求
el-popover弹窗内嵌套下拉选择框,点击el-popover弹出外部区域需关闭弹窗,点击查询、重置需关闭弹窗,
实现
根据需求要自定义弹窗的关闭和显示,首先想到的是visible属性,在实现过程中经过反复的测验,使用visible属性点击弹窗外部区域无法关闭弹窗。
转换思路使用el-popover的hide事件来实现自定义关闭,可满足上述需求
<el-popoverref="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-popoverref="popoverRef":offset="20"placement="bottom"trigger="click"><el-select v-model="value" placeholder="Select" :teleported="false" style="width: 240px"><el-optionv-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',},
]