Vue | 使用Antd Popover气泡卡片组件时第一次触发

需求

需求很简单，就是需要当用户鼠标悬停在按钮上时展示一个二维码图片：

实现效果图

刚好这个项目在用Antd开发，然后就顺理成章的翻到了他们的Popover组件：

Popover

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

何时使用

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

看起来很简单，那我就直接安装文档调用应该就行了吧？

<template>
  <a-popover placement="top">
    <template slot="content">
      <img width="100px" src="/public/img/store_QrCode.png" alt="">
    </template>
    <div class="topBanner-btnArea detail-btn detail-top-btn">
      <span><a-icon type="shopping-cart" /> | 立即购买</span>
    </div>
  </a-popover>
</template>

看起来是没什么问题的，那么让我们看看效果：

实现效果1

嗯？？？为什么第一次触发的时候会显示在元素的正中间？？

这个问题出现的毫无头绪，为了修正它上上下下试了各个父级元素的布局相关，发现都不行；而且这里弹出的气泡实际是在独立的一块iframe里通过js生成的，所以也没办法直接修改它的样式。

瞎试了半天也不能找到头绪，最后决定回归文档。首先是在Popover文档底部的一行小字去到Tooltip组件看到了相关的全部api，然后再在全部api里看到有一个overlayStyle参数可以设定气泡的样式（注意这个overlayStyle的参数类型是Object）。

解决方案

反复分析发现问题出在初次渲染的时候组件未能正确的估计到图片的大小，所以会默认按照文字显示，导致气泡出现在偏移的位置。

那么相应的在组件初次加载的时候就给它指定好宽高即可解决问题。

<template>
  <a-popover placement="top" :overlayStyle="{
    'width': '132px', // 估算好的大小
    'height': '135px', // 高度也应该是132px，另外2px是底部小三角箭头的高度
    }">
    <template slot="content">
      <img width="100px" src="../../../public/img/store_QrCode.png" alt="">
    </template>
    <div class="topBanner-btnArea detail-btn detail-top-btn">
      <span><a-icon type="shopping-cart" /> | 立即购买</span>
    </div>
  </a-popover>
</template>