[popover, select] el-popover内有select的时候在选择后会自动关闭
Steps to reproduce
选择某个选项后会自动关闭
What is Expected?
选择后不自动关闭,等点击按钮后再去触发组件内的关闭方法。
What is actually happening?
自动关闭
Additional comments
这个问题当初在elementui的时候还没有。
<template> <el-popover placement="bottom" :width="200" trigger="click" > <el-select v-model="value" class="m-2" placeholder="Select" :teleported="false"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> <el-button type="primary">搜索</el-button> <el-button type="info">重置</el-button> <template #reference> <el-button>Click to activate</el-button> </template> </el-popover> </template> <script lang="ts" setup> import { ref } from 'vue' const value = ref('') const options = [ { value: 'Option1', label: 'Option1', }, { value: 'Option2', label: 'Option2', }, { value: 'Option3', label: 'Option3', }, { value: 'Option4', label: 'Option4', }, { value: 'Option5', label: 'Option5', }, ] const visible = ref(false) </script>
默认情况下,select
的下拉框dom是添加到body
元素中的,这就导致虽然视图层面看,select
下拉框在 popover body
里面,但实际上他们是dom关系是兄弟元素,所以点击下拉框的行为对于 popover
而言,和在popover
外面鼠标点击的行为是一致的。这就导致popover也关闭了。
尝试解决方法:将 select 组件的 teleported
属性设置为false
,使得它的下拉框被渲染在popover
内部
当你的才华还撑不起你的野心的时候,你就应该静下心来学习;
当你的能力还驾驭不了你的目标时,就应该沉下心来历练。