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