【区分vue2和vue3下的element UI Popover 弹出框组件，分别详细介绍属性，事件，方法如何使用，并举例】

在 Vue 2 中，我们通常使用 Element UI，而在 Vue 3 中，由于 Element UI 官方并未直接支持 Vue 3，因此有一个官方的替代库叫做 Element Plus，它是为 Vue 3 设计的。虽然这两个库在功能和设计上非常相似，但它们在 Vue 2 和 Vue 3 的上下文中有一些细微的差别。以下将分别介绍 Vue 2 下的 Element UI Popover 组件和 Vue 3 下的 Element Plus Popover 组件的属性、事件和方法，并给出示例。

Vue 2 + Element UI Popover

属性（Props）

• trigger: 触发方式（‘click’, ‘hover’, ‘focus’, ‘manual’）。
• title: 标题。
• content: 内容（虽然更推荐使用 slot 来定义复杂内容）。
• width: 宽度。
• placement: 弹出框出现的位置。
• value/v-model: 绑定弹出框的显示状态（主要用于 trigger='manual'）。
• visible-arrow: 是否显示箭头。
• popper-class: 自定义弹出框的类名。
• popper-options: popper.js 的配置项。
• append-to-body: 是否将弹出框插入到 body 元素中。

事件（Events）

• show: 弹出框显示时触发。
• after-enter: 弹出框显示动画结束后触发。
• hide: 弹出框隐藏时触发。
• after-leave: 弹出框隐藏动画结束后触发。

方法（通常不直接暴露）

Element UI 的 Popover 组件不直接暴露方法供外部调用。你可以通过修改绑定的 value 属性或使用事件来控制其显示和隐藏。

示例

<template>
  <el-popover
    placement="bottom"
    title="提示"
    width="200"
    trigger="click"
    v-model="visible">
    <p>这是一段内容。</p>
    <el-button slot="reference">点击我</el-button>
  </el-popover>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
    };
  },
};
</script>

Vue 3 + Element Plus Popover

属性（Props）

• trigger: 触发方式（‘click’, ‘hover’, ‘focus’, ‘manual’）。
• title: 标题。
• width: 宽度。
• placement: 弹出框出现的位置。
• modelValue/v-model: 绑定弹出框的显示状态（主要用于 trigger='manual'）。
• showArrow: 是否显示箭头。
• popperClass: 自定义弹出框的类名。
• popperOptions: popper.js 的配置项。
• showDelay: 显示延时（毫秒）。
• hideDelay: 隐藏延时（毫秒）。
• appendToBody: 是否将弹出框插入到 body 元素中。

事件（Events）

• update:modelValue: 弹出框显示状态变化时触发（主要用于 trigger='manual'）。
• show: 弹出框显示时触发。
• after-enter: 弹出框显示动画结束后触发。
• hide: 弹出框隐藏时触发。
• after-leave: 弹出框隐藏动画结束后触发。

方法（通常不直接暴露）

与 Element UI 类似，Element Plus 的 Popover 组件也不直接暴露方法供外部调用。你可以通过修改绑定的 modelValue 属性或使用事件来控制其显示和隐藏。

示例

<template>
  <el-popover
    placement="bottom"
    title="提示"
    width="200"
    trigger="click"
    v-model="visible">
    <p>这是一段内容。</p>
    <template #reference>
      <el-button>点击我</el-button>
    </template>
  </el-popover>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const visible = ref(false);

    return {
      visible,
    };
  },
};
</script>

注意：在 Vue 3 中，我们使用 Composition API（如 ref）来定义响应式数据。在 Element Plus 的示例中，我使用了 <template #reference> 来指定触发元素，这是 Vue 3的具名插槽的语法，# 是 v-slot 的缩写，类似于 @ 是 v-on 的缩写一样。