当前位置：首页 > 前端教程

elementui popover

2026-03-06 03:55:48前端教程

ElementUI Popover 基础用法

Popover 是 ElementUI 提供的悬浮提示组件，常用于展示额外信息或操作选项。

基本语法：

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

placement：控制弹出位置（top/bottom/left/right）。
trigger：触发方式（hover/click/focus）。
slot="reference"：指定触发 Popover 的元素。

自定义内容

Popover 支持通过默认插槽嵌入自定义 HTML 或组件：

<el-popover
  placement="right"
  width="300"
  trigger="click">
  <div>
    <p>自定义内容</p>
    <el-button size="mini">操作按钮</el-button>
  </div>
  <el-button slot="reference">点击触发</el-button>
</el-popover>

控制 Popover 显示/隐藏

通过 v-model 绑定布尔值手动控制 Popover 状态：

<el-popover
  v-model="visible"
  placement="bottom"
  trigger="manual">
  <p>手动控制的内容</p>
  <el-button slot="reference" @click="visible = !visible">
    {{ visible ? '关闭' : '打开' }}
  </el-button>
</el-popover>

在 Vue 的 data 中定义 visible 变量：

data() {
  return {
    visible: false
  }
}

结合表格或其他组件

Popover 常用于表格行内操作提示：

<el-table :data="tableData">
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-popover
        placement="top"
        trigger="click">
        <p>确定删除 {{ scope.row.name }} 吗？</p>
        <el-button size="mini" @click="handleDelete(scope.row)">确认</el-button>
        <el-button slot="reference" size="mini">删除</el-button>
      </el-popover>
    </template>
  </el-table-column>
</el-table>