el-popover的虚拟触发

<template>
  <el-button
    v-for="(button, index) in buttons"
    :key="button.id"
    ref="buttonRefs"
    @click="handleButtonClick(index)"

  >
    <!-- 遍历多个按钮 重点在buttonRefs里，此处需要定义数组 -->
    {{ button.label }}
  </el-button>
  <el-popover
    ref="popoverRef"
    :virtual-ref="buttonRef"
    :visible="hidePopover"
    title="With title"
    virtual-triggering
  >
    <div v-click-outside="onClickOutside">
        <span> popover content </span>
        <el-button link type="primary" @click="hidePopover = false">删除</el-button>
    </div>
  </el-popover>
</template>

<script setup lang="ts">
  import { ref, unref } from 'vue'
  // element-puls的方法，自定义指令，点击外部区域的处理
  import { ClickOutside as vClickOutside } from 'element-plus'
  // 数组形式
  const buttonRefs = ref([])
  // popover虚拟触发绑定的ref参数
  const buttonRef = ref()
  //popover的ref参数
  const popoverRef = ref()
  //控制popover显示与隐藏
  const hidePopover = ref(false)
  // 隐藏popover，用于点popover窗口外隐藏popover
  const onClickOutside = () => {
    hidePopover.value = false
  }
  // 显示popover
  const handleButtonClick = (data) => {
    // 重新赋值virtual-ref绑定的 ref参数
    buttonRef.value = buttonRefs.value[data]
    // 显示popover
    hidePopover.value = true
  }
  const buttons = [
    { id: 1, label: 'Button 1' },
    { id: 2, label: 'Button 2' },
    { id: 3, label: 'Button 3' },
  ]
</script>

以上代码可直接运行