el-popover详解

el-popover 是 Element Plus 框架中的一个弹出框组件，用于在鼠标悬停或点击某个元素时显示额外的信息。它可以包含任意内容，适用于多种提示和操作场景。

一。属性详解

1. value / v-model:

   • 类型: Boolean
   • 用途: 控制弹出框的显示状态。
   • 默认值: false

2. placement:

   • 类型: String
   • 用途: 弹出框的位置，可选值为 top、top-start、top-end、bottom、bottom-start、bottom-end、left、left-start、left-end、right、right-start、right-end。
   • 默认值: bottom

3. title:

   • 类型: String
   • 用途: 弹出框的标题。

4. width:

   • 类型: Number | String
   • 用途: 弹出框的宽度。
   • 默认值: 150

5. trigger:

   • 类型: String
   • 用途: 触发方式，可选值为 hover、focus、click、manual。
   • 默认值: click

6. content:

   • 类型: String
   • 用途: 弹出框的内容。

7. disabled:

   • 类型: Boolean
   • 用途: 是否禁用弹出框。
   • 默认值: false

8. offset:

   • 类型: Number
   • 用途: 弹出框的偏移量。
   • 默认值: 0

9. transition:

   • 类型: String
   • 用途: 弹出框的过渡动画。
   • 默认值: el-zoom-in-pop

10. visible-arrow:

    • 类型: Boolean
    • 用途: 是否显示箭头。
    • 默认值: true

11. popper-class:

    • 类型: String
    • 用途: 弹出框的自定义类名。

二。el-popover 事件详解

1. show:

   • 类型: Function
   • 用途: 弹出框显示时触发的回调函数。

2. hide:

   • 类型: Function
   • 用途: 弹出框隐藏时触发的回调函数。

三。 el-popover 插槽详解

1. default:

   • 插槽名称: default
   • 用途: 弹出框的内容。

2. reference:

   • 插槽名称: reference
   • 用途: 触发弹出框的参考元素。

四。示例

<template>
  <div>
    <h2>Popover 示例</h2>

    <!-- 基本用法 -->
    <el-popover
      placement="top"
      title="标题"
      width="200"
      trigger="click"
      content="这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容。">
      <el-button slot="reference">点击触发</el-button>
    </el-popover>

    <!-- 自定义内容 -->
    <el-popover
      placement="right"
      title="自定义内容"
      width="200"
      trigger="click">
      <p>这是一段自定义的内容。</p>
      <p>可以包含任意 HTML 元素。</p>
      <el-button slot="reference">点击触发</el-button>
    </el-popover>

    <!-- 不同触发方式 -->
    <el-popover
      placement="bottom"
      title="底部触发"
      width="200"
      trigger="hover">
      <p>这是底部触发的内容。</p>
      <el-button slot="reference">悬停触发</el-button>
    </el-popover>

    <!-- 禁用弹出框 -->
    <el-popover
      placement="left"
      title="禁用弹出框"
      width="200"
      trigger="click"
      disabled>
      <p>这是禁用的弹出框内容。</p>
      <el-button slot="reference">点击触发</el-button>
    </el-popover>

    <!-- 动态控制显示状态 -->
    <el-button @click="showPopover = !showPopover">切换显示</el-button>
    <el-popover
      v-model="showPopover"
      placement="top"
      title="动态控制"
      width="200"
      trigger="manual">
      <p>这是动态控制显示的弹出框内容。</p>
      <el-button slot="reference">点击触发</el-button>
    </el-popover>

    <!-- 不显示箭头 -->
    <el-popover
      placement="top"
      title="不显示箭头"
      width="200"
      trigger="click"
      :visible-arrow="false">
      <p>这是不显示箭头的弹出框内容。</p>
      <el-button slot="reference">点击触发</el-button>
    </el-popover>
  </div>
</template>

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

const showPopover = ref(false)
</script>

<style scoped>
/* 自定义样式 */
.el-popover {
  margin-bottom: 20px;
}
</style>