快捷導(dǎo)航

如何修改vant的less樣式變量

更新時(shí)間：2022年07月02日 11:24:33 作者：qq_42372534

這篇文章主要介紹了如何修改vant的less樣式變量方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

修改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è)picker組件

這樣的一個(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;
 }

這里類名如何得知呢？通過(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 的類名：提高權(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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: