Popover

点击/鼠标移入元素，弹出气泡式的卡片浮层。

何时使用

当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。

和 Tooltip 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。

代码演示

Popover气泡卡片 - 图1

基本

最简单的用法，浮层的大小由内容区域决定。

  1. <template>
  2.   <a-popover title="Title">
  3.     <template slot="content">
  4.       <p>Content</p>
  5.       <p>Content</p>
  6.     </template>
  7.     <a-button type="primary">Hover me</a-button>
  8.   </a-popover>
  9. </template>

Popover气泡卡片 - 图2

箭头指向

设置了 arrowPointAtCenter 后，箭头将指向目标元素的中心。

  1. <template>
  2.   <div>
  3.     <a-popover placement="topLeft">
  4.       <template slot="content">
  5.         <p>Content</p>
  6.         <p>Content</p>
  7.       </template>
  8.       <span slot="title">Title</span>
  9.       <a-button>Align edge / 边缘对齐</a-button>
  10.     </a-popover>
  11.     <a-popover placement="topLeft" arrowPointAtCenter>
  12.       <template slot="content">
  13.         <p>Content</p>
  14.         <p>Content</p>
  15.       </template>
  16.       <span slot="title">Title</span>
  17.       <a-button>Arrow points to center / 箭头指向中心</a-button>
  18.     </a-popover>
  19.   </div>
  20. </template>

Popover气泡卡片 - 图3

从浮层内关闭

使用 visible 属性控制浮层显示。

  1. <template>
  2.   <a-popover
  3.     title="Title"
  4.     trigger="click"
  5.     v-model="visible"
  6.   >
  7.     <a @click="hide" slot="content">Close</a>
  8.     <a-button type="primary">Click me</a-button>
  9.   </a-popover>
  10. </template>
  12. <script>
  13. export default {
  14.   data () {
  15.     return {
  16.       visible: false,
  17.     }
  18.   },
  19.   methods: {
  20.     hide () {
  21.       console.log(111)
  22.       this.visible = false
  23.     },
  24.   },
  25. }
  26. </script>

Popover气泡卡片 - 图4

位置

位置有十二个方向。

  1. <template>
  2. <div id="components-popover-demo-placement">
  3.   <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
  4.     <a-popover placement="topLeft">
  5.       <template slot="content">
  6.         <p>Content</p>
  7.         <p>Content</p>
  8.       </template>
  9.       <template slot="title">
  10.         <span>Title</span>
  11.       </template>
  12.       <a-button>TL</a-button>
  13.     </a-popover>
  14.     <a-popover placement="top">
  15.       <template slot="content">
  16.         <p>Content</p>
  17.         <p>Content</p>
  18.       </template>
  19.       <template slot="title">
  20.         <span>Title</span>
  21.       </template>
  22.       <a-button>Top</a-button>
  23.     </a-popover>
  24.     <a-popover placement="topRight">
  25.       <template slot="content">
  26.         <p>Content</p>
  27.         <p>Content</p>
  28.       </template>
  29.       <template slot="title">
  30.         <span>Title</span>
  31.       </template>
  32.       <a-button>TR</a-button>
  33.     </a-popover>
  34.   </div>
  35.   <div :style="{ width: `${buttonWidth}px`, float: 'left' }">
  36.     <a-popover placement="leftTop">
  37.       <template slot="content">
  38.         <p>Content</p>
  39.         <p>Content</p>
  40.       </template>
  41.       <template slot="title">
  42.         <span>Title</span>
  43.       </template>
  44.       <a-button>LT</a-button>
  45.     </a-popover>
  46.     <a-popover placement="left">
  47.       <template slot="content">
  48.         <p>Content</p>
  49.         <p>Content</p>
  50.       </template>
  51.       <template slot="title">
  52.         <span>Title</span>
  53.       </template>
  54.       <a-button>Left</a-button>
  55.     </a-popover>
  56.     <a-popover placement="leftBottom">
  57.       <template slot="content">
  58.         <p>Content</p>
  59.         <p>Content</p>
  60.       </template>
  61.       <template slot="title">
  62.         <span>Title</span>
  63.       </template>
  64.       <a-button>LB</a-button>
  65.     </a-popover>
  66.   </div>
  67.   <div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">
  68.     <a-popover placement="rightTop">
  69.       <template slot="content">
  70.         <p>Content</p>
  71.         <p>Content</p>
  72.       </template>
  73.       <template slot="title">
  74.         <span>Title</span>
  75.       </template>
  76.       <a-button>RT</a-button>
  77.     </a-popover>
  78.     <a-popover placement="right">
  79.       <template slot="content">
  80.         <p>Content</p>
  81.         <p>Content</p>
  82.       </template>
  83.       <template slot="title">
  84.         <span>Title</span>
  85.       </template>
  86.       <a-button>Right</a-button>
  87.     </a-popover>
  88.     <a-popover placement="rightBottom">
  89.       <template slot="content">
  90.         <p>Content</p>
  91.         <p>Content</p>
  92.       </template>
  93.       <template slot="title">
  94.         <span>Title</span>
  95.       </template>
  96.       <a-button>RB</a-button>
  97.     </a-popover>
  98.   </div>
  99.   <div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
  100.     <a-popover placement="bottomLeft">
  101.       <template slot="content">
  102.         <p>Content</p>
  103.         <p>Content</p>
  104.       </template>
  105.       <template slot="title">
  106.         <span>Title</span>
  107.       </template>
  108.       <a-button>BL</a-button>
  109.     </a-popover>
  110.     <a-popover placement="bottom">
  111.       <template slot="content">
  112.         <p>Content</p>
  113.         <p>Content</p>
  114.       </template>
  115.       <template slot="title">
  116.         <span>Title</span>
  117.       </template>
  118.       <a-button>Bottom</a-button>
  119.     </a-popover>
  120.     <a-popover placement="bottomRight">
  121.       <template slot="content">
  122.         <p>Content</p>
  123.         <p>Content</p>
  124.       </template>
  125.       <template slot="title">
  126.         <span>Title</span>
  127.       </template>
  128.       <a-button>BR</a-button>
  129.     </a-popover>
  130.   </div>
  131. </div>
  132. </template>
  134. <script>
  135. export default {
  136.   data () {
  137.     return {
  138.       buttonWidth: 70,
  139.     }
  140.   },
  141. }
  142. </script>
  143. <style>
  144. #components-popover-demo-placement .ant-btn {
  145.   width: 70px;
  146.   text-align: center;
  147.   padding: 0;
  148.   margin-right: 8px;
  149.   margin-bottom: 8px;
  150. }
  151. </style>

Popover气泡卡片 - 图5

三种触发方式

鼠标移入、聚集、点击。

  1. <template>
  2. <div>
  3.   <a-popover title="Title" trigger="hover">
  4.     <template slot="content">
  5.       <p>Content</p>
  6.       <p>Content</p>
  7.     </template>
  8.     <a-button type="primary">Hover me</a-button>
  9.   </a-popover>
  10.   <a-popover title="Title" trigger="focus">
  11.     <template slot="content">
  12.       <p>Content</p>
  13.       <p>Content</p>
  14.     </template>
  15.     <a-button type="primary">Focus me</a-button>
  16.   </a-popover>
  17.   <a-popover title="Title" trigger="click">
  18.     <template slot="content">
  19.       <p>Content</p>
  20.       <p>Content</p>
  21.     </template>
  22.     <a-button type="primary">Click me</a-button>
  23.   </a-popover>
  24. </div>
  25. </template>

Popover气泡卡片 - 图6

悬停点击弹出窗口

以下示例显示如何创建可悬停和单击的弹出窗口。

  1. <template>
  2.   <a-popover
  3.     style="width: 500px"
  4.     title="Hover title"
  5.     trigger="hover"
  6.     :visible="hovered"
  7.     @visibleChange="handleHoverChange"
  8.   >
  9.     <div slot="content">This is hover content.</div>
  10.     <a-popover
  11.       title="Click title"
  12.       trigger="click"
  13.       :visible="clicked"
  14.       @visibleChange="handleClickChange"
  15.     >
  16.       <div slot="content">
  17.         <div>This is click content.</div>
  18.         <a @click="hide">Close</a>
  19.       </div>
  20.       <a-button>Hover and click / 悬停并单击</a-button>
  21.     </a-popover>
  22.   </a-popover>
  23. </template>
  24. <script>
  25. export default {
  26.   data() {
  27.     return {
  28.       clicked: false,
  29.       hovered: false,
  30.     }
  31.   },
  32.   methods: {
  33.     hide () {
  34.       this.clicked = false
  35.       this.hovered = false
  36.     },
  37.     handleHoverChange (visible) {
  38.       this.clicked = false
  39.       this.hovered = visible
  40.     },
  41.     handleClickChange (visible) {
  42.       this.clicked = visible
  43.       this.hovered = false
  44.     },
  45.   },
  46. }
  47. </script>

API

参数说明类型默认值
content卡片内容string|slot|VNode无
title卡片标题string|slot|VNode无

更多属性请参考 Tooltip。

注意

请确保 Popover 的子元素能接受 mouseenter、mouseleave、focus、click 事件。