Element浅尝辄止9：Popover 弹出框组件

最新推荐文章于 2024-07-16 09:51:32 发布

渣渣砖

最新推荐文章于 2024-07-16 09:51:32 发布

阅读量1.9k

点赞数

分类专栏：组件 element-ui Vue 文章标签：前端 elementui vue.js

本文链接：https://blog.csdn.net/w2457307263/article/details/132544024

版权

Vue 同时被 3 个专栏收录

36 篇文章 2 订阅

订阅专栏

element-ui

30 篇文章 4 订阅

订阅专栏

组件

18 篇文章 0 订阅

订阅专栏

本文详细介绍了VuePopover组件的触发方式（hover、click、focus、manual），如何通过slot和自定义指令使用，以及如何嵌套表格和操作。展示了如何在不同场景下配置和使用Popover组件。

摘要由CSDN通过智能技术生成

Popover 的属性与 Tooltip 很类似，它们都是基于Vue-popper开发的，因此有重复属性

1.如何使用？

/*trigger属性用于设置何时触发 Popover，支持四种触发方式：
hover，click，focus 和 manual。
对于触发 Popover 的元素，有两种写法：使用 slot="reference" 
的具名插槽，或使用自定义指令v-popover指向 Popover 的索引ref。*/

<template>
  <el-popover
    placement="top-start"
    title="标题"
    width="200"
    trigger="hover"
    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
    <el-button slot="reference">hover 激活</el-button>
  </el-popover>

  <el-popover
    placement="bottom"
    title="标题"
    width="200"
    trigger="click"
    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
    <el-button slot="reference">click 激活</el-button>
  </el-popover>

  <el-popover
    ref="popover"
    placement="right"
    title="标题"
    width="200"
    trigger="focus"
    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
  </el-popover>
  <el-button v-popover:popover>focus 激活</el-button>

  <el-popover
    placement="bottom"
    title="标题"
    width="200"
    trigger="manual"
    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
    v-model="visible">
    <el-button slot="reference" @click="visible = !visible">手动激活</el-button>
  </el-popover>
</template>

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

2.嵌套信息

Popover 中可以嵌套多种类型信息

利用分发取代content属性

<el-popover
  placement="top"
  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>

<script>
  export default {
    data() {
      return {
        gridData: [{
          date: '2016-05-02',
          name: '王xx',
          address: '北京市普陀弄'
        }, {
          date: '2016-05-04',
          name: '王xy',
          address: '天津 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王二狗',
          address: '普陀区金沙江路 1518 弄'
        }]
      };
    }
  };
</script>

3.嵌套操作

也可以嵌套操作，这相比 Dialog 更为轻量

<el-popover
  placement="top"
  width="160"
  v-model="visible">
  <p>Are you OK？</p>
  <div style="text-align: right; margin: 0">
    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
    <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
  </div>
  <el-button slot="reference">删除</el-button>
</el-popover>

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

上述即为popover组件的大致内容，想要深入浅出可以移步弹出框