element-plus [Component] [popover] popover弹框中有select选择器,操作选择器popover也一同消失消失

ha5z0ras  于 4个月前  发布在  其他
关注(0)|答案(4)|浏览(114)

Bug Type: Component

Environment

  • Vue Version: 3.2.45
  • Element Plus Version: 2.2.28
  • Browser / OS: chrome/win10
  • Build Tool: Vite

Reproduction

  • el-popover

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)

g6baxovj

g6baxovj1#

popper-append-to-body(已废弃)改成 teleported

hgb9j2n6

hgb9j2n63#

下拉需要设置:teleported="false"

<div ref="tempContentRef"  v-click-outside="close">
function close(e) { 
    if (!tempContentRef.value.contains(e.target)) { 
       toValue(propJsonSchemaRef)?.hide() 
    } 
}
zzlelutf

zzlelutf4#

Just improving the example from @xw-xw12:

// <script> block
const visible = ref(false);
  /** @type {import('element-plus').PopoverInstance} */
  const popoverRef = ref(null);

const onClickOutside = (event) => {
  const contentRef = unref(popoverRef).popperRef?.contentRef;
  if (!contentRef.contains(event.target)) {
    visible.value = false;
  }
 };
<!-- <template> block -->
<el-button v-popover="popoverRef" v-click-outside="onClickOutside">
Open Popover
</el-button>

<el-popover
        ref="popoverRef"
        :visible="visible"
        placement="bottom"
        width="450"
        virtual-triggering
        persistent
      >
Popover content
</el-popover>

For some reason, when calling the hide method from the popover ref, the visible ref doesn't have your value changed. To workaround it, I updated the value of the visible ref to false .

相关问题