需求

需求很簡單，就是需要當(dāng)用戶鼠標(biāo)懸停在按鈕上時(shí)展示一個(gè)二維碼圖片：

實(shí)現(xiàn)效果圖

剛好這個(gè)項(xiàng)目在用Antd開發(fā)，然后就順理成章的翻到了他們的Popover組件：

Popover

點(diǎn)擊/鼠標(biāo)移入元素，彈出氣泡式的卡片浮層。

何時(shí)使用

當(dāng)目標(biāo)元素有進(jìn)一步的描述和相關(guān)操作時(shí)，可以收納到卡片中，根據(jù)用戶的操作行為進(jìn)行展現(xiàn)。

看起來很簡單，那我就直接安裝文檔調(diào)用應(yīng)該就行了吧？

<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>

看起來是沒什么問題的，那么讓我們看看效果：

實(shí)現(xiàn)效果1

嗯？？？為什么第一次觸發(fā)的時(shí)候會顯示在元素的正中間？？

這個(gè)問題出現(xiàn)的毫無頭緒，為了修正它上上下下試了各個(gè)父級元素的布局相關(guān)，發(fā)現(xiàn)都不行；而且這里彈出的氣泡實(shí)際是在獨(dú)立的一塊iframe里通過js生成的，所以也沒辦法直接修改它的樣式。

瞎試了半天也不能找到頭緒，最后決定回歸文檔。首先是在Popover文檔底部的一行小字去到Tooltip組件看到了相關(guān)的全部api，然后再在全部api里看到有一個(gè)overlayStyle參數(shù)可以設(shè)定氣泡的樣式（注意這個(gè)overlayStyle的參數(shù)類型是Object）。

解決方案

反復(fù)分析發(fā)現(xiàn)問題出在初次渲染的時(shí)候組件未能正確的估計(jì)到圖片的大小，所以會默認(rèn)按照文字顯示，導(dǎo)致氣泡出現(xiàn)在偏移的位置。

那么相應(yīng)的在組件初次加載的時(shí)候就給它指定好寬高即可解決問題。

<template>
  <a-popover placement="top" :overlayStyle="{
    'width': '132px', // 估算好的大小
    'height': '135px', // 高度也應(yīng)該是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>