<template>
  <el-popover
    ref="popoverRef"
    placement="bottom"
    trigger="click"
    hide-after="0"
    popper-class="popover-class"
    :width="width"
  >
    <!-- Popover 内部内容 -->
    <slot />

    <!-- 触发按钮，放在组件内部 -->
    <template #reference>
      <el-button>{{ buttonText }}</el-button>
    </template>
  </el-popover>
</template>

<script setup>
import { ref } from "vue";

defineProps({
  width: {
    type: [String, Number],
    default: "fit-content"
  },
  popoverClass: {
    type: String,
    default: ""
  },
  buttonText: {
    type: String,
    default: "高级筛选"
  }
});

const popoverRef = ref(null);
</script>
