<template>
  <el-popover ref="popoverRef" :virtual-ref="buttonRef" :visible="hidePopover" virtual-triggering v-bind="$attrs">
    <div v-click-outside="close">
      <slot name="default"></slot>
    </div>
  </el-popover>
</template>

<script setup lang="ts">
import { ref, unref } from "vue";
import { ClickOutside as vClickOutside } from "element-plus";

const buttonRefs = ref([]);
const buttonRef = ref();
const popoverRef = ref();
const hidePopover = ref(false);
const close = () => {
  hidePopover.value = false;
};
/**
 * @description 显示popover
 * @param {HTMLElement} data ref对象
 */
const show = data => {
  buttonRef.value = data;
  hidePopover.value = true;
};

defineExpose({
  show,
  close
});
</script>
