Popover
點擊/鼠標移入元素,彈出氣泡式的卡片浮層。
何時使用
當目標元素有進一步的描述和相關操作時,可以收納到卡片中,根據用戶的操作行為進行展現。
和
Tooltip
的區別是,用戶可以對浮層上的元素進行操作,因此它可以承載更復雜的內容,比如鏈接或按鈕等。
https://www.antdv.com/components/popover-cn/#components-popover-demo-basic
基本使用
<template>
<a-popover title="Title">
<template slot="content">
<p>Content</p>
<p>Content</p>
</template>
<a-button type="primary">
Hover me
</a-button>
</a-popover>
</template>
效果
頭像懸浮氣泡卡片示例
<!--左上顯示-->
<a-popover placement="leftTop">
<template slot="content">
<a-tag color="red" @click="this.clickLoginout">
退出登錄
</a-tag>
</template>
<img src="../assets/avatar.jpg" class="circleImg">
</a-popover>