Vue.js前端框架教程14：Vue组件el-popover

文章目录

• • • • [el-popover 组件](#el-popover 组件)
      • • 基础用法
        • 嵌套信息
        • 手动控制显示状态
    • 自定义挂载节点
    • • • 触发事件

el-popover 组件

el-popover 是 Element UI 库中的一个弹出框组件，它用于在用户交互时显示额外的信息或操作。以下是 el-popover 组件的一些基本用法：

基础用法

el-popover 可以通过不同的触发方式显示弹出框，如鼠标悬停（hover）、点击（click）、焦点（focus）或手动触发（manual）。

<template>
  <el-popover
    placement="top"
    title="标题"
    width="200"
    trigger="click"
    content="这是一段内容">
    <el-button slot="reference">点击触发</el-button>
  </el-popover>
</template>

在这个例子中，当用户点击按钮时，会显示 el-popover 弹出框 。

嵌套信息

el-popover 可以嵌套多种类型的信息，例如表格。

<el-popover
  placement="right"
  width="400"
  trigger="click">
  <el-table :data="gridData">
    <el-table-column width="150" property="date" label="日期"></el-table-column>
    <el-table-column width="100" property="name" label="姓名"></el-table-column>
    <el-table-column width="300" property="address" label="地址"></el-table-column>
  </el-table>
  <el-button slot="reference">click 激活</el-button>
</el-popover>

在这个例子中，点击按钮会触发一个包含表格的 el-popover 弹出框 。

手动控制显示状态

el-popover 可以通过 v-model 或者 visible 属性手动控制显示状态。

<el-popover
  v-model="visible"
  placement="top"
  title="手动控制"
  width="200"
  trigger="manual"
  content="这是一个弹出框的内容">
  <el-button slot="reference" @click="visible = !visible">手动激活</el-button>
</el-popover>

在这个例子中，按钮的点击会切换 el-popover 的显示状态 。

自定义挂载节点

el-popover 允许自定义挂载节点，可以通过 ref 属性和 $refs 来操作。

<el-button ref="target" type="primary">点击我</el-button>
<el-popover ref="popover" placement="top">
  <p>这是一个自定义挂载节点的Popover</p>
</el-popover>

在 mounted 钩子中，可以通过 this.$refs 获取 el-popover 组件的实例对象，并设置自定义挂载节点 。

触发事件

el-popover 支持点击自定义事件来触发弹出框。

<el-popover
  ref="popover"
  placement="top"
  title="触发事件"
  width="200"
  trigger="click"
  content="这是一个弹出框的内容">
  <el-button slot="reference" @click="$refs.popover.doShow">显示Popover</el-button>
</el-popover>

在这个例子中，点击按钮会触发 el-popover 的显示 。

这些是 el-popover 组件的一些基本用法，你可以根据具体需求配置不同的属性和事件来满足你的应用场景。