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)文章
vue控制多行文字展開(kāi)收起的實(shí)現(xiàn)示例
這篇文章主要介紹了vue控制多行文字展開(kāi)收起的實(shí)現(xiàn)示例（也叫控制文字展開(kāi)隱藏），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue路由傳參的基本實(shí)現(xiàn)方式小結(jié)【三種方式】
這篇文章主要介紹了vue路由傳參的基本實(shí)現(xiàn)方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js路由傳參的三種實(shí)現(xiàn)方式,包括params顯示傳參、不顯示參數(shù)以及query顯示參數(shù)傳參,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了詳解vue+webpack+express中間件接口使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
vue自定義指令用法經(jīng)典實(shí)例小結(jié)
這篇文章主要介紹了vue自定義指令用法,結(jié)合實(shí)例形式總結(jié)分析了vue自定義指令常見(jiàn)寫(xiě)法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-03-03
vue實(shí)現(xiàn)編輯器鍵盤(pán)抬起時(shí)內(nèi)容跟隨光標(biāo)距頂位置向上滾動(dòng)效果
這篇文章主要介紹了vue實(shí)現(xiàn)編輯器鍵盤(pán)抬起時(shí)內(nèi)容跟隨光標(biāo)距頂位置向上滾動(dòng)效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)選擇商品規(guī)格功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue-treeselect?是一個(gè)多選組件，具有對(duì)?Vue.js嵌套選項(xiàng)支持，這篇文章主要介紹了關(guān)于vue-treeselect的基本用法,需要的朋友可以參考下2022-11-11
Element?UI?table參數(shù)中的selectable的使用及遇到坑
這篇文章主要介紹了Element?UI?table參數(shù)中的selectable的使用及遇到的坑，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
在vue3中,?提供了一個(gè)?useAttrs?的方法它接收到的參數(shù)一?prop中可以接收到的數(shù)據(jù)是基本一樣的如果我們想自已寫(xiě)一個(gè)組件,?把?elementPlus?中的期中一個(gè)組件封裝一下,這篇文章主要介紹了vue3中的useAttrs和props的區(qū)別,需要的朋友可以參考下2023-09-09
本文通過(guò)實(shí)例代碼給大家介紹了Vue隱藏顯示、只讀功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-07-07