需要

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

刚好这个我的项目在用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>