ant?design?vue?圖片預(yù)覽組件自定義樣式
版本：
ant design vue 3.2.4
場景：
使用Image圖片組件預(yù)覽功能
需求：
自定義預(yù)覽遮罩層及預(yù)覽圖片的樣式；
不得影響到其他頁面or組件的樣式；
for example，下圖是預(yù)覽組件默認(rèn)樣式：
我希望改個(gè)背景顏色，類似這樣：
難點(diǎn)： 不同于modal，tooltip這種，Image組件沒有給預(yù)覽功能的wrapper直接賦值類名的屬性（起碼文檔上沒有提到）；
那就意味著只能到把預(yù)覽組件的樣式改到全局作用域里，那勢必會(huì)影響到別的頁面的樣式；
解決方式：
思路就是兩個(gè)方面：
- 把預(yù)覽的整個(gè)組件放到一個(gè)自定義類名的dom元素里（默認(rèn)是放在最外層body下的）；
官方提供的相關(guān)的配置previewType：
{
visible?: boolean;
onVisibleChange?: (visible, prevVisible) => void;
getContainer: string | HTMLElement | (() => HTMLElement);
}
乍一看可以用getContainer來解決，whatever，太麻煩~
- 回歸本心，想辦法給預(yù)覽組件附上自定義類名；
上antd源碼，看看我發(fā)現(xiàn)了什么：
prefixCls，針對(duì)這個(gè)文檔中沒提到的屬性深入下去,先看setup的render
關(guān)鍵在這兒：
{ "class": "".concat(prefixCls.value, "-mask-info") }
不出所料哈，prefixCls這個(gè)props果然是提供給預(yù)覽的遮罩層做類名的；
那剩下事情就很簡單了，只要給Image組件提供prefixCls的屬性，把自定義的類名賦值上去就行了；類似這樣~
最后一個(gè)point：prefixCls是有默認(rèn)值的，值為ant-image，如果直接給prefixCls賦值一個(gè)字符串，其實(shí)是把它的默認(rèn)樣式給覆蓋掉了，；就需要從頭寫一套預(yù)覽功能的樣式，很麻煩；所以我們給prefixCls賦值時(shí)，完全可以像上圖那樣，采用 “自定義類名 ant-image” 的格式；然后就可以在保留原樣式的基礎(chǔ)上，快樂利用自定義類名去覆蓋部分樣式了；
end
以上就是ant design vue 圖片預(yù)覽組件自定義樣式的詳細(xì)內(nèi)容，更多關(guān)于ant design vue 組件自定義的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
使用百度云加速后網(wǎng)站打開速度慢、廣告不顯示的解決方法
這篇文章主要介紹了使用百度云加速后網(wǎng)站打開速度慢、廣告不顯示的解決方法,需要的朋友可以參考下2015-09-09
微信小程序應(yīng)用號(hào)開發(fā)體驗(yàn)
這篇文章主要介紹了微信小程序（應(yīng)用號(hào)）開發(fā)體驗(yàn)的相關(guān)資料,需要的朋友可以參考下2016-09-09
Git撤銷&回滾操作(git reset 和 get revert)
這篇文章主要介紹了Git撤銷&回滾操作(git reset 和 get revert)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
如何集成Elasticsearch到django restful
在Django項(xiàng)目中集成Elasticsearch可通過Haystack實(shí)現(xiàn),Haystack作為Django插件提供搜索接口,Elasticsearch作為后端搜索引擎存儲(chǔ)檢索數(shù)據(jù),Haystack支持多種搜索引擎,易于切換且不需改動(dòng)代碼,本文給大家介紹如何集成Elasticsearch到django restful,感興趣的朋友一起看看吧2024-09-09
redis debug環(huán)境搭建過程詳解(使用clion)
這篇文章給大家介紹redis debug環(huán)境搭建過程，使用clion，達(dá)到和調(diào)試java一樣的效果，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-07-07
這篇文章主要為大家介紹了git版本庫創(chuàng)建拓展添加文件到版本庫教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
這篇文章主要給大家介紹了關(guān)于程序員面試如何提高面試通過率的相關(guān)資料,通過文中介紹的方法可以提高面試概率,讓大家盡快找到好工作,需要的朋友可以參考下2007-04-04
鴻蒙開發(fā)搭建flutter適配的開發(fā)環(huán)境
文章詳細(xì)介紹了在Windows系統(tǒng)上如何創(chuàng)建和運(yùn)行鴻蒙Flutter項(xiàng)目,包括使用flutter?doctor檢測環(huán)境、創(chuàng)建項(xiàng)目、編譯HAP包以及在真機(jī)上運(yùn)行項(xiàng)目,打包鴻蒙Flutter應(yīng)用的測試包和正式包的方法,并介紹了常見問題的解決方法2024-12-12
這篇文章主要介紹了URL中斜杠/和反斜杠\的區(qū)別小結(jié),純屬個(gè)人總結(jié),相對(duì)長篇大論較容易理解,需要的朋友可以參考下2014-07-07
Elaticsearch簡稱為es，es是一個(gè)開源的高擴(kuò)展的分布式全文檢索引擎，本文給大家介紹ElasticSearch基礎(chǔ)知識(shí)介紹，對(duì)ElasticSearch相關(guān)知識(shí)感興趣的朋友一起看看吧2022-07-07