关于javascript: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>

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

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

这个问题呈现的毫无脉络，为了修改它上上下下试了各个父级元素的布局相干，发现都不行；而且这里弹出的气泡理论是在独立的一块 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>