Popover气泡卡片 - 图1

Popover 气泡卡片

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

何时使用

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

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

代码演示

Hover me

基本用法

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

  1. <template>
  2.   <a-popover title="Title">
  3.     <template #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

位置

位置有十二个方向。

  1. <template>
  2.   <div id="components-popover-demo-placement">
  3.     <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
  4.       <a-popover placement="topLeft">
  5.         <template #content>
  6.           <p>Content</p>
  7.           <p>Content</p>
  8.         </template>
  9.         <template #title>
  10.           <span>Title</span>
  11.         </template>
  12.         <a-button>TL</a-button>
  13.       </a-popover>
  14.       <a-popover placement="top">
  15.         <template #content>
  16.           <p>Content</p>
  17.           <p>Content</p>
  18.         </template>
  19.         <template #title>
  20.           <span>Title</span>
  21.         </template>
  22.         <a-button>Top</a-button>
  23.       </a-popover>
  24.       <a-popover placement="topRight">
  25.         <template #content>
  26.           <p>Content</p>
  27.           <p>Content</p>
  28.         </template>
  29.         <template #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 #content>
  38.           <p>Content</p>
  39.           <p>Content</p>
  40.         </template>
  41.         <template #title>
  42.           <span>Title</span>
  43.         </template>
  44.         <a-button>LT</a-button>
  45.       </a-popover>
  46.       <a-popover placement="left">
  47.         <template #content>
  48.           <p>Content</p>
  49.           <p>Content</p>
  50.         </template>
  51.         <template #title>
  52.           <span>Title</span>
  53.         </template>
  54.         <a-button>Left</a-button>
  55.       </a-popover>
  56.       <a-popover placement="leftBottom">
  57.         <template #content>
  58.           <p>Content</p>
  59.           <p>Content</p>
  60.         </template>
  61.         <template #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 #content>
  70.           <p>Content</p>
  71.           <p>Content</p>
  72.         </template>
  73.         <template #title>
  74.           <span>Title</span>
  75.         </template>
  76.         <a-button>RT</a-button>
  77.       </a-popover>
  78.       <a-popover placement="right">
  79.         <template #content>
  80.           <p>Content</p>
  81.           <p>Content</p>
  82.         </template>
  83.         <template #title>
  84.           <span>Title</span>
  85.         </template>
  86.         <a-button>Right</a-button>
  87.       </a-popover>
  88.       <a-popover placement="rightBottom">
  89.         <template #content>
  90.           <p>Content</p>
  91.           <p>Content</p>
  92.         </template>
  93.         <template #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 #content>
  102.           <p>Content</p>
  103.           <p>Content</p>
  104.         </template>
  105.         <template #title>
  106.           <span>Title</span>
  107.         </template>
  108.         <a-button>BL</a-button>
  109.       </a-popover>
  110.       <a-popover placement="bottom">
  111.         <template #content>
  112.           <p>Content</p>
  113.           <p>Content</p>
  114.         </template>
  115.         <template #title>
  116.           <span>Title</span>
  117.         </template>
  118.         <a-button>Bottom</a-button>
  119.       </a-popover>
  120.       <a-popover placement="bottomRight">
  121.         <template #content>
  122.           <p>Content</p>
  123.           <p>Content</p>
  124.         </template>
  125.         <template #title>
  126.           <span>Title</span>
  127.         </template>
  128.         <a-button>BR</a-button>
  129.       </a-popover>
  130.     </div>
  131.   </div>
  132. </template>
  133. <script lang="ts">
  134. import { defineComponent, ref } from 'vue';
  135. export default defineComponent({
  136.   setup() {
  137.     return {
  138.       buttonWidth: ref<number>(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气泡卡片 - 图3

箭头指向

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

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

Popover气泡卡片 - 图4

三种触发方式

鼠标移入、聚集、点击。

  1. <template>
  2.   <div>
  3.     <a-popover title="Title" trigger="hover">
  4.       <template #content>
  5.         <p>Content</p>
  6.         <p>Content</p>
  7.       </template>
  8.       <a-button>Hover me</a-button>
  9.     </a-popover>
  10.     <a-popover title="Title" trigger="focus">
  11.       <template #content>
  12.         <p>Content</p>
  13.         <p>Content</p>
  14.       </template>
  15.       <a-button>Focus me</a-button>
  16.     </a-popover>
  17.     <a-popover title="Title" trigger="click">
  18.       <template #content>
  19.         <p>Content</p>
  20.         <p>Content</p>
  21.       </template>
  22.       <a-button>Click me</a-button>
  23.     </a-popover>
  24.   </div>
  25. </template>
  27. <style>
  28. #components-popover-demo-triggerType .ant-btn {
  29.   margin-right: 8px;
  30. }
  31. </style>

Click me

从浮层内关闭

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

  1. <template>
  2.   <a-popover v-model:visible="visible" title="Title" trigger="click">
  3.     <template #content>
  4.       <a @click="hide">Close</a>
  5.     </template>
  6.     <a-button type="primary">Click me</a-button>
  7.   </a-popover>
  8. </template>
  9. <script lang="ts">
  10. import { defineComponent, ref } from 'vue';
  11. export default defineComponent({
  12.   setup() {
  13.     const visible = ref<boolean>(false);
  15.     const hide = () => {
  16.       visible.value = false;
  17.     };
  19.     return {
  20.       visible,
  21.       hide,
  22.     };
  23.   },
  24. });
  25. </script>

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.     <template #content>
  10.       <div>This is hover content.</div>
  11.     </template>
  12.     <a-popover
  13.       title="Click title"
  14.       trigger="click"
  15.       :visible="clicked"
  16.       @visibleChange="handleClickChange"
  17.     >
  18.       <template #content>
  19.         <div>
  20.           <div>This is click content.</div>
  21.           <a @click="hide">Close</a>
  22.         </div>
  23.       </template>
  24.       <a-button>Hover and click / 悬停并单击</a-button>
  25.     </a-popover>
  26.   </a-popover>
  27. </template>
  28. <script lang="ts">
  29. import { defineComponent, ref } from 'vue';
  30. export default defineComponent({
  31.   setup() {
  32.     const clicked = ref<boolean>(false);
  33.     const hovered = ref<boolean>(false);
  35.     const hide = () => {
  36.       clicked.value = false;
  37.       hovered.value = false;
  38.     };
  40.     const handleHoverChange = (visible: boolean) => {
  41.       clicked.value = false;
  42.       hovered.value = visible;
  43.     };
  45.     const handleClickChange = (visible: boolean) => {
  46.       clicked.value = visible;
  47.       hovered.value = false;
  48.     };
  50.     return {
  51.       clicked,
  52.       hovered,
  53.       hide,
  54.       handleHoverChange,
  55.       handleClickChange,
  56.     };
  57.   },
  58. });
  59. </script>

API

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

更多属性请参考 Tooltip。

注意

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