問題描述:
需要給popover組件設置固定 寬高。
問題背景:
在項目中做一個基於Ant-D popover 氣泡卡片組件、封裝的時間面板組件的時候,遇到一個問題需要固定 popover組件的寬高。
最初嘗試用 樣式穿透的方式,設置 popover 樣式如下:
/deep/ .ant-popover-inner-content {
width: 302px;
height: 239px;
}
發現上面並不會生效,查找官方文檔的 popover組件,在api的最下面,發現了一行小字,“更多屬性請參考 Tooltip。”
最終在 tooltip、popconfirm、popover 共有的 api中發現了一個參數 overlayStyle 類型是一個對象,可以用來設置氣泡的樣式。( 注意,這個overlayStyle 的類型是 Object )
解決方案:
在 overlayStyle 屬性中聲明好對應的樣式對象如下:
<a-popover :overlayStyle="popoverStyle" class="fl" :class="{'w100' : isMobileMode}">
// 省略。。。
</a-popover>
computed: {
popoverStyle() {
if (this.isMobileMode) {
return { maxWidth: '330px' };
}
return this.showShortcut ? { width: '302px', height: '239px' } : { width: '630px' };
},
}
在組件初次加載的時候,指定好寬高,就能解決這個問題了。
