Popover 弹出框

基础用法

Popover 的属性与 Tooltip 很类似,它们都是基于Vue-popper开发的,因此对于重复属性,请参考 Tooltip 的文档,在此文档中不做详尽解释。

Popover 弹出框 - 图1

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

  1. <template>
  2. <el-popover
  3. placement="top-start"
  4. title="标题"
  5. width="200"
  6. trigger="hover"
  7. content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
  8. <el-button slot="reference">hover 激活</el-button>
  9. </el-popover>
  10. <el-popover
  11. placement="bottom"
  12. title="标题"
  13. width="200"
  14. trigger="click"
  15. content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
  16. <el-button slot="reference">click 激活</el-button>
  17. </el-popover>
  18. <el-popover
  19. ref="popover"
  20. placement="right"
  21. title="标题"
  22. width="200"
  23. trigger="focus"
  24. content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
  25. </el-popover>
  26. <el-button v-popover:popover>focus 激活</el-button>
  27. <el-popover
  28. placement="bottom"
  29. title="标题"
  30. width="200"
  31. trigger="manual"
  32. content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
  33. v-model="visible">
  34. <el-button slot="reference" @click="visible = !visible">手动激活</el-button>
  35. </el-popover>
  36. </template>
  37. <script>
  38. export default {
  39. data() {
  40. return {
  41. visible: false
  42. };
  43. }
  44. };
  45. </script>

嵌套信息

可以在 Popover 中嵌套多种类型信息,以下为嵌套表格的例子。

Popover 弹出框 - 图2

利用分发取代content属性

  1. <el-popover
  2. placement="right"
  3. width="400"
  4. trigger="click">
  5. <el-table :data="gridData">
  6. <el-table-column width="150" property="date" label="日期"></el-table-column>
  7. <el-table-column width="100" property="name" label="姓名"></el-table-column>
  8. <el-table-column width="300" property="address" label="地址"></el-table-column>
  9. </el-table>
  10. <el-button slot="reference">click 激活</el-button>
  11. </el-popover>
  12. <script>
  13. export default {
  14. data() {
  15. return {
  16. gridData: [{
  17. date: '2016-05-02',
  18. name: '王小虎',
  19. address: '上海市普陀区金沙江路 1518 弄'
  20. }, {
  21. date: '2016-05-04',
  22. name: '王小虎',
  23. address: '上海市普陀区金沙江路 1518 弄'
  24. }, {
  25. date: '2016-05-01',
  26. name: '王小虎',
  27. address: '上海市普陀区金沙江路 1518 弄'
  28. }, {
  29. date: '2016-05-03',
  30. name: '王小虎',
  31. address: '上海市普陀区金沙江路 1518 弄'
  32. }]
  33. };
  34. }
  35. };
  36. </script>

嵌套操作

当然,你还可以嵌套操作,这相比 Dialog 更为轻量:

Popover 弹出框 - 图3

  1. <el-popover
  2. placement="top"
  3. width="160"
  4. v-model="visible">
  5. <p>这是一段内容这是一段内容确定删除吗?</p>
  6. <div style="text-align: right; margin: 0">
  7. <el-button size="mini" type="text" @click="visible = false">取消</el-button>
  8. <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
  9. </div>
  10. <el-button slot="reference">删除</el-button>
  11. </el-popover>
  12. <script>
  13. export default {
  14. data() {
  15. return {
  16. visible: false,
  17. };
  18. }
  19. }
  20. </script>

Attributes

参数说明类型可选值默认值
trigger触发方式Stringclick/focus/hover/manualclick
title标题String
content显示的内容,也可以通过 slot 传入 DOMString
width宽度String, Number最小宽度 150px
placement出现位置Stringtop/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-endbottom
disabledPopover 是否可用Booleanfalse
value / v-model状态是否可见Booleanfalse
offset出现位置的偏移量Number0
transition定义渐变动画Stringfade-in-linear
visible-arrow是否显示 Tooltip 箭头,更多参数可见Vue-popperBooleantrue
popper-optionspopper.js 的参数Object参考 popper.js 文档{ boundariesElement: 'body', gpuAcceleration: false }
popper-class为 popper 添加类名String
open-delay触发方式为 hover 时的显示延迟,单位为毫秒Number
tabindexPopover 组件的 tabindexnumber0

Slot

参数说明
Popover 内嵌 HTML 文本
reference触发 Popover 显示的 HTML 元素

Events

事件名称说明回调参数
show显示时触发
after-enter显示动画播放完毕后触发
hide隐藏时触发
after-leave隐藏动画播放完毕后触发