vue如何使用vant組件的field組件disabled修改默認(rèn)樣式
使用vant組件的field組件disabled修改默認(rèn)樣式
由于vue開(kāi)發(fā)時(shí)會(huì)在style加上scoped避免全局污染，所以正常開(kāi)發(fā)時(shí)直接修改外部組件（vant）的樣式時(shí)會(huì)不生效，我們把scoped刪除后會(huì)發(fā)現(xiàn)樣式是可以生效的。
但是scoped是肯定不能不要的。
所以我們可以用 /deep/（深度）來(lái)修改樣式
舉例 —— 修改vant —— field組件disabled情況下的字體默認(rèn)樣式
? /deep/.van-field__control:disabled,
? /deep/.van-field__control[disabled] {
? ? color: #000;
? ? opacity: 1;
? ? -webkit-text-fill-color: #000; // ios 和 安卓9.0 必須添加此屬性，才會(huì)生效
? ? -webkit-opacity: 1;
? }/deep/ 方法已經(jīng)舍棄 建議用最新的
vue+vant修改樣式
1.當(dāng)<style>沒(méi)有scoped時(shí)
在瀏覽器的開(kāi)發(fā)者工具（F12）里定位到你要修改的組件上
比如說(shuō)我需要修改這個(gè)span里的文字大小，可以找到class=".van-tab__text–ellipsis",然后在你的<style>里直接寫(xiě)樣式他會(huì)覆蓋原來(lái)vant組件默認(rèn)的樣式
2.有scoped時(shí)
很多時(shí)候我們只想要修改當(dāng)前頁(yè)面的這個(gè)組件樣式，就不可避免要用到scoped,但如果還是像上面的方法修改的話會(huì)發(fā)現(xiàn)修改無(wú)效，這時(shí)需要用到深度選擇器
.>>>
可用于項(xiàng)目中的css原生樣式，那么可以直接使用 >>>
.a >>> .b {
}/deep/（同::v-deep）
項(xiàng)目中使用預(yù)處理器，如sass less等 都可以用 /deep/
/*這樣*/
.a {
/deep/ .b {
}
}
/*或者這樣*/
.a /deep/ .b {
}比如此處：
有一個(gè)注意點(diǎn)：有小伙伴可能沒(méi)有找到此時(shí)class的上一級(jí)class，比如上圖的.van-tabs–card，那么自己動(dòng)手把要修改的組件用一個(gè)div包起來(lái)，給它自定義一個(gè)class就好了
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
混淆是一種有效的保護(hù)措施,可以加密和壓縮代碼,使其難以被理解和修改,本文將介紹Vue混淆的概念以及如何進(jìn)行還原,感興趣的可以了解一下2023-12-12
Vue中v-on的基礎(chǔ)用法、參數(shù)傳遞和修飾符的示例詳解
使用v-on:click給button綁定監(jiān)聽(tīng)事件以及回調(diào)函數(shù)，@是v-on:的縮寫(xiě)，也就是簡(jiǎn)寫(xiě)也可以使用@click，這篇文章主要介紹了Vue中v-on的基礎(chǔ)用法、參數(shù)傳遞和修飾符,需要的朋友可以參考下2022-08-08
Vue數(shù)據(jù)綁定實(shí)例寫(xiě)法
在本篇文章里小編給大家整理的是關(guān)于Vue數(shù)據(jù)綁定實(shí)例寫(xiě)法以及相關(guān)知識(shí)點(diǎn)，需要的朋友們學(xué)習(xí)下。2019-08-08
這篇文章主要介紹了vue環(huán)境搭建簡(jiǎn)單教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
在管理系統(tǒng)中，常常需要在頂部tags顯示瀏覽歷史。本文將教大家如何通過(guò)Vue實(shí)現(xiàn)這一功能，文中的示例代碼講解詳細(xì)，需要的可以參考一下2021-12-12
vue?頁(yè)面卡死,點(diǎn)擊無(wú)反應(yīng)的問(wèn)題及解決
這篇文章主要介紹了vue?頁(yè)面卡死,點(diǎn)擊無(wú)反應(yīng)的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue項(xiàng)目中實(shí)現(xiàn)ElementUI按需引入過(guò)程解析
這篇文章主要介紹了Vue項(xiàng)目中實(shí)現(xiàn)ElementUI按需引入,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
<el-button>點(diǎn)擊后如何跳轉(zhuǎn)指定url鏈接
這篇文章主要介紹了<el-button>點(diǎn)擊后如何跳轉(zhuǎn)指定url鏈接問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
require.js+vue開(kāi)發(fā)微信上傳圖片組件
這篇文章主要為大家詳細(xì)介紹了require.js+vue+vue-router+vue-resource開(kāi)發(fā)微信上傳圖片組件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
vue源碼解讀子節(jié)點(diǎn)優(yōu)化更新
這篇文章主要為大家介紹了vue源碼解讀子節(jié)點(diǎn)優(yōu)化更新示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08