ant?design?vue?圖片預(yù)覽組件自定義樣式

更新時間：2023年05月16日 10:41:21 作者：youcans_

這篇文章主要為大家介紹了ant?design?vue?圖片預(yù)覽組件自定義樣式方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

版本：

ant design vue 3.2.4

場景：

使用Image圖片組件預(yù)覽功能

需求：

自定義預(yù)覽遮罩層及預(yù)覽圖片的樣式；

不得影響到其他頁面or組件的樣式；

for example，下圖是預(yù)覽組件默認樣式：

我希望改個背景顏色，類似這樣：

難點：不同于modal，tooltip這種，Image組件沒有給預(yù)覽功能的wrapper直接賦值類名的屬性（起碼文檔上沒有提到）；

那就意味著只能到把預(yù)覽組件的樣式改到全局作用域里，那勢必會影響到別的頁面的樣式；

解決方式：

思路就是兩個方面：

把預(yù)覽的整個組件放到一個自定義類名的dom元素里（默認是放在最外層body下的）；

官方提供的相關(guān)的配置previewType：

{
    visible?: boolean; 
    onVisibleChange?: (visible, prevVisible) => void; 
    getContainer: string | HTMLElement | (() => HTMLElement);
}

乍一看可以用getContainer來解決，whatever，太麻煩~

回歸本心，想辦法給預(yù)覽組件附上自定義類名；

上antd源碼，看看我發(fā)現(xiàn)了什么：

prefixCls，針對這個文檔中沒提到的屬性深入下去,先看setup的render

關(guān)鍵在這兒：

    { "class": "".concat(prefixCls.value, "-mask-info") }

不出所料哈，prefixCls這個props果然是提供給預(yù)覽的遮罩層做類名的；

那剩下事情就很簡單了，只要給Image組件提供prefixCls的屬性，把自定義的類名賦值上去就行了；類似這樣~

最后一個point：prefixCls是有默認值的，值為ant-image，如果直接給prefixCls賦值一個字符串，其實是把它的默認樣式給覆蓋掉了，；就需要從頭寫一套預(yù)覽功能的樣式，很麻煩；所以我們給prefixCls賦值時，完全可以像上圖那樣，采用 “自定義類名 ant-image” 的格式；然后就可以在保留原樣式的基礎(chǔ)上，快樂利用自定義類名去覆蓋部分樣式了；

end

以上就是ant design vue 圖片預(yù)覽組件自定義樣式的詳細內(nèi)容，更多關(guān)于ant design vue 組件自定義的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: