antd Popover 气泡卡片，首次位置不对解决方法

最新推荐文章于 2024-07-29 22:07:42 发布

丨丨三戒丶

最新推荐文章于 2024-07-29 22:07:42 发布

阅读量4.6k

点赞数 1

分类专栏： vue HTML 文章标签： vue 前端 html

本文链接：https://blog.csdn.net/u014206461/article/details/120214793

版权

vue 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

解决Ant Design of Vue - Popover 气泡卡片首次位置不对问题

想要效果:

在这里插入图片描述

首次进入效果：

在这里插入图片描述

再次移入显示就对了，解决方法：加上高宽（:overlayStyle="{ ‘width’: ‘208.34px’, ‘height’: ‘267px’ }"）或者：在 slot=“content” 下里面元素加高宽！如下即可

<a-popover title="Title" :overlayStyle="{ 'width': '208.34px', 'height': '267px' }">
    <template slot="content">
        <p>Content</p>
        <p>Content</p>
        <img src="123.png" width="100">
    </template>
    <a-button type="primary">Hover me</a-button>
</a-popover>