antd vue Popover氣泡卡片的使用


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>

效果

image-20201228160633542

頭像懸浮氣泡卡片示例

<!--左上顯示-->
<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>

image-20201228161852519


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM