如何修改vant的less樣式變量
修改vant的less樣式變量
引入全局css
import ‘vant/lib/index.css';
引入單個(gè)組件樣式
import ‘vant/lib/toast/style/less';
新建一個(gè)less文件,用于修改vant的less變量
如conver_vant.less,在里面修改變量
//toast @toast-background-color:blue; @action-sheet-max-height:80%!important;
在vue.config.js里按照官方提示配置
這里注意要使用絕對(duì)路徑,并且@import 后面記得跟雙引號(hào)""。
const path = require('path') module.exports = { ? ? css:{ ? ? ? ? loaderOptions:{ ? ? ? ? ? ? less:{ ? ? ? ? ? ? ? ? modifyVars:{ ? ? ? ? ? ? ? ? ? ? //通過(guò)本地less文件覆蓋變量 ? ? ? ? ? ? ? ? ? ? // true; @import "your-less-file-path.less"; ? ? ? ? ? ? ? ? ? ? hack:`true;@import "${path.resolve(__dirname,'./src/common/cover_vant.less')}";` ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? } ? ? } }
修改完重新運(yùn)行npm run serve才能看到效果。
vant組件的樣式修改
主要還是在VUE中使用vant組件,一些樣式的修改。
例如
這樣的一個(gè)組件,我們修改他的樣式,這里是我修改過(guò)后的樣式,原來(lái)是白色的。
可以在app的樣式中加入
.van-dropdown-menu__bar { background: #6609f2 !important; box-shadow: none !important; } .van-dropdown-menu__title, .van-dropdown-menu__title--active { color: #fff !important; }
這里類(lèi)名如何得知呢?通過(guò)網(wǎng)頁(yè)審查元素得到。
但這樣修改會(huì)產(chǎn)生一個(gè)問(wèn)題,就是這個(gè)樣式成為全局的了。
別的頁(yè)面使用,也會(huì)是這樣一個(gè)樣式。
這個(gè)時(shí)候,可以在單獨(dú)頁(yè)面中設(shè)置,但要注意的是把spcoed去掉,不然不生效。
<style lang='less'> .van-dropdown-menu__bar { background: #6609f2 !important; box-shadow: none !important; } .van-dropdown-menu__title, .van-dropdown-menu__title--active { color: #fff !important; } </style>
效果如圖
但后來(lái)又發(fā)現(xiàn)又有新的問(wèn)題,子組件在相同的頁(yè)面,修改掉,但不能同時(shí)展現(xiàn)兩個(gè)。
后面靈機(jī)一動(dòng),又想到了一個(gè)新的方法
html結(jié)構(gòu):
<van-dropdown-menu class="btn"> <van-dropdown-item v-model="valueCity" :options="optionCity" @change="changeCity" /> <van-dropdown-item v-model="valuePrice" :options="optionPrice" @change="changeDropdown" /> <van-dropdown-item v-model="valueYear" :options="optionYear" @change="changeYear" /> </van-dropdown-menu>
加了一個(gè)btn 的類(lèi)名:提高權(quán)限,限制樣式條件
css:
<style lang="less" > .btn > .van-dropdown-menu__bar { background: #fff !important; } .btn .van-dropdown-menu__title { color: #333 !important; } </style>
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue v-for中的 input 或 select的值發(fā)生改變時(shí)觸發(fā)事件操作
這篇文章主要介紹了Vue v-for中的 input 或 select的值發(fā)生改變時(shí)觸發(fā)事件操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08如何利用vue展示.docx文件、excel文件和csv文件內(nèi)容
最近遇到了一些新的需求,需要前端實(shí)現(xiàn)文件預(yù)覽功能,下面這篇文章主要給大家介紹了關(guān)于如何利用vue展示.docx文件、excel文件和csv文件內(nèi)容的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04vue實(shí)現(xiàn)登錄數(shù)據(jù)的持久化的使用示例
在Vue.js中,實(shí)現(xiàn)登錄數(shù)據(jù)的持久化需要使用瀏覽器提供的本地存儲(chǔ)功能,Vue.js支持使用localStorage和sessionStorage來(lái)實(shí)現(xiàn)本地存儲(chǔ),本文就來(lái)介紹一下如何實(shí)現(xiàn),感興趣的可以了解一下2023-10-10Vue Spa切換頁(yè)面時(shí)更改標(biāo)題的實(shí)例代碼
本篇文章主要介紹了Vue Spa切換頁(yè)面時(shí)更改標(biāo)題的實(shí)例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息)
這篇文章主要介紹了Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04Vue3中使用ref標(biāo)簽對(duì)組件進(jìn)行操作方法
這篇文章主要介紹了Vue3中使用ref標(biāo)簽對(duì)組件進(jìn)行操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04vue-lazyload圖片延遲加載插件的實(shí)例講解
下面小編就為大家分享一篇vue-lazyload圖片延遲加載插件的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02vue實(shí)現(xiàn)把接口單獨(dú)存放在一個(gè)文件方式
這篇文章主要介紹了vue實(shí)現(xiàn)把接口單獨(dú)存放在一個(gè)文件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08