需要
需要很简略，就是须要当用户鼠标悬停在按钮上时展现一个二维码图片：
刚好这个我的项目在用 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>看起来是没什么问题的，那么让咱们看看成果：
嗯？？？为什么第一次触发的时候会显示在元素的正中间？？
这个问题呈现的毫无脉络，为了修改它上上下下试了各个父级元素的布局相干，发现都不行；而且这里弹出的气泡理论是在独立的一块 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>