el-popoverx详解

el-popover 是 Element Plus 框架中的弹出框组件，用于在用户交互时显示额外的信息或操作。它可以用于工具提示、菜单、表单等场景。

el-popover 属性详解

1. visible:

   • 类型: 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

10. tabindex:

    • 类型: Number | String
    • 用途: 触发元素的 tabindex 属性。
    • 默认值: 0

11. teleported:

    • 类型: Boolean
    • 用途: 是否将弹出框插入到 body 元素中。
    • 默认值: true

12. showArrow:

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

13. popperClass:

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

14. popperOptions:

    • 类型: Object
    • 用途: 弹出框的配置选项。
    • 默认值: { boundariesElement: 'body', gpuAcceleration: false }

el-popover 事件详解

1. show:

   • 类型: Function
   • 用途: 弹出框显示时触发。
   • 参数: —

2. hide:

   • 类型: Function
   • 用途: 弹出框隐藏时触发。
   • 参数: —

3. visible-change:

   • 类型: Function
   • 用途: 弹出框显示或隐藏时触发。
   • 参数: visible（布尔值，表示是否显示）

el-popover 插槽详解

1. default:

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

2. reference:

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

完整示例代码

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

    <!-- 基本用法 -->
    <el-popover
      placement="top"
      title="标题"
      width="200"
      trigger="click"
      content="这是一个弹出框的内容"
    >
      <template #reference>
        <el-button>点击显示弹出框</el-button>
      </template>
    </el-popover>

    <!-- 自定义内容 -->
    <el-popover
      placement="right"
      title="自定义内容"
      width="200"
      trigger="click"
    >
      <div>
        <p>这是一个自定义的内容。</p>
        <el-button @click="handleClick">点击我</el-button>
      </div>
      <template #reference>
        <el-button>点击显示自定义内容</el-button>
      </template>
    </el-popover>

    <!-- 不同触发方式 -->
    <el-popover
      placement="bottom"
      title="鼠标悬停显示"
      width="200"
      trigger="hover"
      content="这是一个弹出框的内容"
    >
      <template #reference>
        <el-button>鼠标悬停显示</el-button>
      </template>
    </el-popover>

    <!-- 禁用状态 -->
    <el-popover
      placement="left"
      title="禁用状态"
      width="200"
      trigger="click"
      disabled
      content="这是一个弹出框的内容"
    >
      <template #reference>
        <el-button>禁用状态</el-button>
      </template>
    </el-popover>

    <!-- 手动控制显示与隐藏 -->
    <el-popover
      ref="popoverRef"
      placement="top"
      title="手动控制"
      width="200"
      trigger="manual"
      content="这是一个弹出框的内容"
    >
      <template #reference>
        <el-button @click="togglePopover">手动控制显示与隐藏</el-button>
      </template>
    </el-popover>
  </div>
</template>

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

const popoverRef = ref(null)

const handleClick = () => {
  alert('点击了按钮')
}

const togglePopover = () => {
  if (popoverRef.value) {
    popoverRef.value.visible = !popoverRef.value.visible
  }
}
</script>

代码解释

1. 基本用法:

   • 使用 el-popover 组件并设置 placement、title、width、trigger 和 content 属性来指定弹出框的位置、标题、宽度、触发方式和内容。

   • <el-popover
       placement="top"
       title="标题"
       width="200"
       trigger="click"
       content="这是一个弹出框的内容"
     >
       <template #reference>
         <el-button>点击显示弹出框</el-button>
       </template>
     </el-popover>
     

2. 自定义内容:

   • 使用默认插槽自定义弹出框的内容。

   • <el-popover
       placement="right"
       title="自定义内容"
       width="200"
       trigger="click"
     >
       <div>
         <p>这是一个自定义的内容。</p>
         <el-button @click="handleClick">点击我</el-button>
       </div>
       <template #reference>
         <el-button>点击显示自定义内容</el-button>
       </template>
     </el-popover>
     

3. 不同触发方式:

   • 使用 trigger 属性设置不同的触发方式。

   • <el-popover
       placement="bottom"
       title="鼠标悬停显示"
       width="200"
       trigger="hover"
       content="这是一个弹出框的内容"
     >
       <template #reference>
         <el-button>鼠标悬停显示</el-button>
       </template>
     </el-popover>
     

4. 禁用状态:

   • 使用 disabled 属性禁用弹出框。

   • <el-popover
       placement="left"
       title="禁用状态"
       width="200"
       trigger="click"
       disabled
       content="这是一个弹出框的内容"
     >
       <template #reference>
         <el-button>禁用状态</el-button>
       </template>
     </el-popover>
     

5. 手动控制显示与隐藏:

   • 使用 ref 和 visible 属性手动控制弹出框的显示与隐藏。

   • <el-popover
       ref="popoverRef"
       placement="top"
       title="手动控制"
       width="200"
       trigger="manual"
       content="这是一个弹出框的内容"
     >
       <template #reference>
         <el-button @click="togglePopover">手动控制显示与隐藏</el-button>
       </template>
     </el-popover>