Bug Type: Component
Environment
- Vue Version:
3.2.45
- Element Plus Version:
2.2.28
- Browser / OS:
chrome/win10
- Build Tool:
Vite
Reproduction
Related Component
el-popover
Reproduction Link
Element Plus Playground
Steps to reproduce
<template>
<el-button ref="buttonRef" v-click-outside="onClickOutside"
>Click me</el-button
>
<el-popover
ref="popoverRef"
:virtual-ref="buttonRef"
trigger="click"
title="With title"
virtual-triggering
>
<el-select multiple v-model="value" class="m-2" placeholder="Select" size="large">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-popover>
<el-popover
placement="bottom"
title="Title"
:width="200"
trigger="click"
>
<el-select v-model="value" class="m-2" placeholder="Select" size="large">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<template #reference>
<el-button class="m-2">Click to activate</el-button>
</template>
</el-popover>
</template>
<script setup lang="ts">
import { ref, unref } from 'vue'
import { ClickOutside as vClickOutside } from 'element-plus'
const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = () => {
unref(popoverRef).popperRef?.delayHide?.()
}
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',
},
]
</script>
What is Expected?
选择select,popper不消失
What is actually happening?
选择select,popper消失
Additional comments
(empty)
4条答案
按热度按时间g6baxovj1#
popper-append-to-body(已废弃)改成 teleported
9rnv2umw2#
解决了么
hgb9j2n63#
下拉需要设置:teleported="false"
zzlelutf4#
Just improving the example from @xw-xw12:
For some reason, when calling the
hide
method from the popover ref, thevisible
ref doesn't have your value changed. To workaround it, I updated the value of thevisible
ref tofalse
.