vue如何使用vant組件的field組件disabled修改默認樣式
使用vant組件的field組件disabled修改默認樣式
由于vue開發(fā)時會在style加上scoped避免全局污染，所以正常開發(fā)時直接修改外部組件（vant）的樣式時會不生效，我們把scoped刪除后會發(fā)現(xiàn)樣式是可以生效的。
但是scoped是肯定不能不要的。
所以我們可以用 /deep/（深度）來修改樣式
舉例 —— 修改vant —— field組件disabled情況下的字體默認樣式
? /deep/.van-field__control:disabled,
? /deep/.van-field__control[disabled] {
? ? color: #000;
? ? opacity: 1;
? ? -webkit-text-fill-color: #000; // ios 和 安卓9.0 必須添加此屬性，才會生效
? ? -webkit-opacity: 1;
? }/deep/ 方法已經(jīng)舍棄 建議用最新的
vue+vant修改樣式
1.當(dāng)<style>沒有scoped時
在瀏覽器的開發(fā)者工具（F12）里定位到你要修改的組件上
比如說我需要修改這個span里的文字大小，可以找到class=".van-tab__text–ellipsis",然后在你的<style>里直接寫樣式他會覆蓋原來vant組件默認的樣式
2.有scoped時
很多時候我們只想要修改當(dāng)前頁面的這個組件樣式，就不可避免要用到scoped,但如果還是像上面的方法修改的話會發(fā)現(xiàn)修改無效，這時需要用到深度選擇器
.>>>
可用于項目中的css原生樣式，那么可以直接使用 >>>
.a >>> .b {
}/deep/（同::v-deep）
項目中使用預(yù)處理器，如sass less等 都可以用 /deep/
/*這樣*/
.a {
/deep/ .b {
}
}
/*或者這樣*/
.a /deep/ .b {
}比如此處：
有一個注意點：有小伙伴可能沒有找到此時class的上一級class，比如上圖的.van-tabs–card，那么自己動手把要修改的組件用一個div包起來，給它自定義一個class就好了
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue控制多行文字展開收起的實現(xiàn)示例（也叫控制文字展開隱藏），文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue路由傳參的基本實現(xiàn)方式小結(jié)【三種方式】
這篇文章主要介紹了vue路由傳參的基本實現(xiàn)方式,結(jié)合實例形式總結(jié)分析了vue.js路由傳參的三種實現(xiàn)方式,包括params顯示傳參、不顯示參數(shù)以及query顯示參數(shù)傳參,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了詳解vue+webpack+express中間件接口使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue自定義指令用法,結(jié)合實例形式總結(jié)分析了vue自定義指令常見寫法與相關(guān)操作注意事項,需要的朋友可以參考下2019-03-03
vue實現(xiàn)編輯器鍵盤抬起時內(nèi)容跟隨光標距頂位置向上滾動效果
這篇文章主要介紹了vue實現(xiàn)編輯器鍵盤抬起時內(nèi)容跟隨光標距頂位置向上滾動效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細介紹了vue實現(xiàn)選擇商品規(guī)格功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue-treeselect?是一個多選組件，具有對?Vue.js嵌套選項支持，這篇文章主要介紹了關(guān)于vue-treeselect的基本用法,需要的朋友可以參考下2022-11-11
Element?UI?table參數(shù)中的selectable的使用及遇到坑
這篇文章主要介紹了Element?UI?table參數(shù)中的selectable的使用及遇到的坑，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
在vue3中,?提供了一個?useAttrs?的方法它接收到的參數(shù)一?prop中可以接收到的數(shù)據(jù)是基本一樣的如果我們想自已寫一個組件,?把?elementPlus?中的期中一個組件封裝一下,這篇文章主要介紹了vue3中的useAttrs和props的區(qū)別,需要的朋友可以參考下2023-09-09
本文通過實例代碼給大家介紹了Vue隱藏顯示、只讀功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07