• Popover
    • 何时使用
    • 代码演示
      • 基本
      • 箭头指向
      • 从浮层内关闭
      • 位置
      • 三种触发方式
      • 悬停点击弹出窗口
  • API
  • 注意

    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 事件。