Popover气泡卡片 - 图1

Popover

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

何时使用

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

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

代码演示

Hover me

基本

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

  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">
  8.       Hover me
  9.     </a-button>
  10.   </a-popover>
  11. </template>

Click me

从浮层内关闭

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

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

Popover气泡卡片 - 图2

三种触发方式

鼠标移入、聚集、点击。

  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">
  9.         Hover me
  10.       </a-button>
  11.     </a-popover>
  12.     <a-popover title="Title" trigger="focus">
  13.       <template slot="content">
  14.         <p>Content</p>
  15.         <p>Content</p>
  16.       </template>
  17.       <a-button type="primary">
  18.         Focus me
  19.       </a-button>
  20.     </a-popover>
  21.     <a-popover title="Title" trigger="click">
  22.       <template slot="content">
  23.         <p>Content</p>
  24.         <p>Content</p>
  25.       </template>
  26.       <a-button type="primary">
  27.         Click me
  28.       </a-button>
  29.     </a-popover>
  30.   </div>
  31. </template>

Popover气泡卡片 - 图3

箭头指向

设置了 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" arrow-point-at-center>
  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气泡卡片 - 图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>

Hover and click / 悬停并单击

悬停点击弹出窗口

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

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

API

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

更多属性请参考 Tooltip。

注意

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