• Popover 弹出框
    • 基础用法
    • 嵌套信息
    • 嵌套操作
    • Attributes
    • Slot
    • Events

    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
    close-delay触发方式为 hover 时的隐藏延迟,单位为毫秒number200
    tabindexPopover 组件的 tabindexnumber0

    Slot

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

    Events

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