Poptip 气泡提示

概述

Poptip 与 Tooltip 类似,具有很多相同配置,不同点是 Poptip 以卡片的形式承载了更多的内容,比如链接、表格、按钮等。

Poptip 还 confirm 确认框,与 Modal 不同的是,它会出现在就近元素,相对轻量。

代码示例

Poptip 气泡提示 - 图1

基础用法

支持三种触发方式:鼠标悬停、点击、聚焦。默认是点击。

注意 Poptip 内的文本使用了 white-space: nowrap;,即不自动换行,如需展示很多内容并自动换行时,建议给内容 slot 增加样式 white-space: normal;

  1. <template>
  2. <Poptip trigger="hover" title="Title" content="content">
  3. <Button>Hover</Button>
  4. </Poptip>
  5. <Poptip title="Title" content="content">
  6. <Button>Click</Button>
  7. </Poptip>
  8. <Poptip trigger="focus" title="Title" content="content">
  9. <Button>Focus</Button>
  10. </Poptip>
  11. <Poptip trigger="focus" title="Title" content="content">
  12. <Input placeholder="Input focus" />
  13. </Poptip>
  14. </template>
  15. <script>
  16. export default {
  17. }
  18. </script>

Poptip 气泡提示 - 图2

位置

组件提供了12个不同的方向显示Poptip,具体配置可查看API。。

  1. <style scoped>
  2. .top,.bottom{
  3. text-align: center;
  4. }
  5. .center{
  6. width: 300px;
  7. margin: 10px auto;
  8. overflow: hidden;
  9. }
  10. .center-left{
  11. float: left;
  12. }
  13. .center-right{
  14. float: right;
  15. }
  16. </style>
  17. <template>
  18. <div class="top">
  19. <Poptip title="Title" content="content" placement="top-start">
  20. <Button>Top Left</Button>
  21. </Poptip>
  22. <Poptip title="Title" content="content" placement="top">
  23. <Button>Top Center</Button>
  24. </Poptip>
  25. <Poptip title="Title" content="content" placement="top-end">
  26. <Button>Top Right</Button>
  27. </Poptip>
  28. </div>
  29. <div class="center">
  30. <div class="center-left">
  31. <Poptip title="Title" content="content" placement="left-start">
  32. <Button>Left Top</Button>
  33. </Poptip><br><br>
  34. <Poptip title="Title" content="content" placement="left">
  35. <Button>Left Center</Button>
  36. </Poptip><br><br>
  37. <Poptip title="Title" content="content" placement="left-end">
  38. <Button>Left Bottom</Button>
  39. </Poptip>
  40. </div>
  41. <div class="center-right">
  42. <Poptip title="Title" content="content" placement="right-start">
  43. <Button>Right Top</Button>
  44. </Poptip><br><br>
  45. <Poptip title="Title" content="content" placement="right">
  46. <Button>Right Center</Button>
  47. </Poptip><br><br>
  48. <Poptip title="Title" content="content" placement="right-end">
  49. <Button>Right Bottom</Button>
  50. </Poptip>
  51. </div>
  52. </div>
  53. <div class="bottom">
  54. <Poptip title="Title" content="content" placement="bottom-start">
  55. <Button>Bottom Left</Button>
  56. </Poptip>
  57. <Poptip title="Title" content="content" placement="bottom">
  58. <Button>Bottom Center</Button>
  59. </Poptip>
  60. <Poptip title="Title" content="content" placement="bottom-end">
  61. <Button>Bottom Right</Button>
  62. </Poptip>
  63. </div>
  64. </template>
  65. <script>
  66. export default {
  67. }
  68. </script>

Poptip 气泡提示 - 图3

从浮层内关闭

通过v-model来控制提示框的显示和隐藏。

  1. <template>
  2. <Poptip v-model="visible">
  3. <a>Click</a>
  4. <div slot="title"><i>Custom title</i></div>
  5. <div slot="content">
  6. <a @click="close">close</a>
  7. </div>
  8. </Poptip>
  9. </template>
  10. <script>
  11. export default {
  12. data () {
  13. return {
  14. visible: false
  15. }
  16. },
  17. methods: {
  18. close () {
  19. this.visible = false;
  20. }
  21. }
  22. }
  23. </script>

Poptip 气泡提示 - 图4

嵌套复杂内容

通过自定义 slot 来实现复杂的内容。

  1. <template>
  2. <Poptip placement="right" width="400">
  3. <Button>Click</Button>
  4. <div class="api" slot="content">
  5. <table>
  6. <thead>
  7. <tr>
  8. <th>Version</th>
  9. <th>Update Time</th>
  10. <th>Description</th>
  11. </tr>
  12. </thead>
  13. <tbody>
  14. <tr>
  15. <td>0.9.5</td>
  16. <td>2016-10-26</td>
  17. <td>Add new components <code>Tooltip</code> and <code>Poptip</code></td>
  18. </tr>
  19. <tr>
  20. <td>0.9.4</td>
  21. <td>2016-10-25</td>
  22. <td>Add new components <code>Modal</code></td>
  23. </tr>
  24. <tr>
  25. <td>0.9.2</td>
  26. <td>2016-09-28</td>
  27. <td>Add new components <code>Select</code></td>
  28. </tr>
  29. </tbody>
  30. </table>
  31. </div>
  32. </Poptip>
  33. </template>
  34. <script>
  35. export default {
  36. }
  37. </script>

Poptip 气泡提示 - 图5

自动换行

设置属性 word-wrap,当超出宽度后,文本将自动换行,并两端对齐。

  1. <template>
  2. <Poptip word-wrap width="200" content="Steven Paul Jobs was an American entrepreneur and business magnate. He was the chairman, chief executive officer, and a co-founder of Apple Inc.">
  3. <Button>Long Content</Button>
  4. </Poptip>
  5. </template>
  6. <script>
  7. export default {
  8. }
  9. </script>

Poptip 气泡提示 - 图6

确认框

通过设置属性confirm开启确认框模式。确认框只会以 click 的形式激活,并且只会显示 title 的内容,忽略 content。

  1. <template>
  2. <Poptip
  3. confirm
  4. title="Are you sure you want to delete this item?"
  5. @on-ok="ok"
  6. @on-cancel="cancel">
  7. <Button>Delete</Button>
  8. </Poptip>
  9. <Poptip
  10. confirm
  11. title="Are you sure delete this task?"
  12. @on-ok="ok"
  13. @on-cancel="cancel"
  14. ok-text="yes"
  15. cancel-text="no">
  16. <Button>Internationalization</Button>
  17. </Poptip>
  18. </template>
  19. <script>
  20. export default {
  21. methods: {
  22. ok () {
  23. this.$Message.info('You click ok');
  24. },
  25. cancel () {
  26. this.$Message.info('You click cancel');
  27. }
  28. }
  29. }
  30. </script>

API

Poptip props

属性说明类型默认值
trigger触发方式,可选值为hover(悬停)click(点击)focus(聚焦),在 confirm 模式下,只有 click 有效Stringclick
title显示的标题String | Number-
content显示的正文内容,只在非 confirm 模式下有效String | Number
placement提示框出现的位置,可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end,2.12.0 版本开始支持自动识别Stringtop
width宽度,最小宽度为 150px,在 confirm 模式下,默认最大宽度为 300pxString | Number-
confirm是否开启对话框模式Booleanfalse
disabled 3.4.0是否禁用Booleanfalse
ok-text确定按钮的文字,只在 confirm 模式下有效String确定
cancel-text取消按钮的文字,只在 confirm 模式下有效String取消
transfer是否将弹层放置于 body 内,在 Tabs、带有 fixed 的 Table 列内使用时,建议添加此属性,它将不受父级样式影响,从而达到更好的效果Booleanfalse
popper-class给 Poptip 设置 class-name,在使用 transfer 时会很有用String-
word-wrap开启后,超出指定宽度文本将自动换行,并两端对齐Booleanfalse
padding自定义间距值String8px 16px
offset出现位置的偏移量Number0
options自定义 popper.js 的配置项,具体配置见 popper.js 文档Object
  1. { modifiers: { computeStyle:{ gpuAcceleration: false, }, preventOverflow :{ boundariesElement: 'window' } }}

Poptip events

事件名说明返回值
on-popper-show在提示框显示时触发
on-popper-hide在提示框消失时触发
on-ok点击确定的回调,只在 confirm 模式下有效
on-cancel点击取消的回调,只在 confirm 模式下有效

Poptip slot

名称说明
主体内容
title提示框标题,定义此 slot 时,会覆盖 props title
content提示框内容,定义此 slot 时,会覆盖 props content,只在非 confirm 模式下有效