ant?design?vue?圖片預(yù)覽組件自定義樣式
版本：
ant design vue 3.2.4
場(chǎng)景：
使用Image圖片組件預(yù)覽功能
需求：
自定義預(yù)覽遮罩層及預(yù)覽圖片的樣式；
不得影響到其他頁(yè)面or組件的樣式；
for example，下圖是預(yù)覽組件默認(rèn)樣式：
我希望改個(gè)背景顏色，類似這樣：
難點(diǎn)： 不同于modal，tooltip這種，Image組件沒(méi)有給預(yù)覽功能的wrapper直接賦值類名的屬性（起碼文檔上沒(méi)有提到）；
那就意味著只能到把預(yù)覽組件的樣式改到全局作用域里，那勢(shì)必會(huì)影響到別的頁(yè)面的樣式；
解決方式：
思路就是兩個(gè)方面：
- 把預(yù)覽的整個(gè)組件放到一個(gè)自定義類名的dom元素里（默認(rèn)是放在最外層body下的）；
官方提供的相關(guān)的配置previewType：
{
visible?: boolean;
onVisibleChange?: (visible, prevVisible) => void;
getContainer: string | HTMLElement | (() => HTMLElement);
}
乍一看可以用getContainer來(lái)解決，whatever，太麻煩~
- 回歸本心，想辦法給預(yù)覽組件附上自定義類名；
上antd源碼，看看我發(fā)現(xiàn)了什么：
prefixCls，針對(duì)這個(gè)文檔中沒(méi)提到的屬性深入下去,先看setup的render
關(guān)鍵在這兒：
{ "class": "".concat(prefixCls.value, "-mask-info") }
不出所料哈，prefixCls這個(gè)props果然是提供給預(yù)覽的遮罩層做類名的；
那剩下事情就很簡(jiǎn)單了，只要給Image組件提供prefixCls的屬性，把自定義的類名賦值上去就行了；類似這樣~
最后一個(gè)point：prefixCls是有默認(rèn)值的，值為ant-image，如果直接給prefixCls賦值一個(gè)字符串，其實(shí)是把它的默認(rèn)樣式給覆蓋掉了，；就需要從頭寫一套預(yù)覽功能的樣式，很麻煩；所以我們給prefixCls賦值時(shí)，完全可以像上圖那樣，采用 “自定義類名 ant-image” 的格式；然后就可以在保留原樣式的基礎(chǔ)上，快樂(lè)利用自定義類名去覆蓋部分樣式了；
end
以上就是ant design vue 圖片預(yù)覽組件自定義樣式的詳細(xì)內(nèi)容，更多關(guān)于ant design vue 組件自定義的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了詳解git commit --amend 用法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了git checkout 命令使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
使用MobaXterm連接到遠(yuǎn)程服務(wù)器的圖文教程
這篇文章主要為大家詳細(xì)為大家介紹了如何使用MobaXterm連接到遠(yuǎn)程服務(wù)器,文中通過(guò)圖文進(jìn)行了詳細(xì)的講解,有需要的小伙伴可以參考一下2023-09-09
關(guān)于Interlij 無(wú)法使用中文輸入法的解決方法(適用于Interlij全家桶 Linux環(huán)境)
這篇文章主要介紹了關(guān)于Interlij 無(wú)法使用中文輸入法的解決方法(適用于Interlij全家桶 Linux環(huán)境),本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
chatgpt-api是?OpenAI?ChatGPT?的非官方的?Node.js?包裝器，?chatgpt-api不再需要任何瀏覽器破解它使用泄露出來(lái)的OpenAI官方ChatGPT?在后臺(tái)使用的模型，這篇文章主要介紹了chatgpt-api使用指南【官方泄露版】,需要的朋友可以參考下2023-02-02
針對(duì)idea激活碼失效的情況，我們給大家?guī)?lái)最新的idea激活碼以及相關(guān)激活教程，分享最新idea激活參數(shù)等信息。2020-02-02
HTTP協(xié)議是基于請(qǐng)求／響應(yīng)范式的。一個(gè)客戶機(jī)與服務(wù)器建立連接后，發(fā)送一個(gè)請(qǐng)求給服務(wù)器，請(qǐng)求方式的格式為，統(tǒng)一資源標(biāo)識(shí)符、協(xié)議版本號(hào)，后邊是MIME信息包括請(qǐng)求修飾符、客戶機(jī)信息和可能的內(nèi)容。2011-02-02
使用Visual Studio進(jìn)行文件差異比較的問(wèn)題小結(jié)
這篇文章主要介紹了使用Visual Studio進(jìn)行文件差異比較,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-07-07
這篇文章主要為開發(fā)人員收錄了18個(gè)最好的代碼編輯器/IDE工具，希望你會(huì)喜歡2014-05-05
Runnable.com 在線測(cè)試代碼片分享網(wǎng)站
Runnable是一個(gè)一站式的代碼片段集合網(wǎng)站，你不僅可以搜索代碼，還可以編輯、運(yùn)行這些代碼片段，以確保它們的正確性與可用性2013-12-12