如何修改vant的less樣式變量

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

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

修改vant的less樣式變量

引入全局css

import ‘vant/lib/index.css';

引入單個組件樣式

import ‘vant/lib/toast/style/less';

新建一個less文件，用于修改vant的less變量

如conver_vant.less,在里面修改變量

//toast
@toast-background-color:blue;
@action-sheet-max-height:80%!important;

在vue.config.js里按照官方提示配置

這里注意要使用絕對路徑，并且@import 后面記得跟雙引號""。

const path = require('path')
module.exports = {
? ? css:{
? ? ? ? loaderOptions:{
? ? ? ? ? ? less:{
? ? ? ? ? ? ? ? modifyVars:{
? ? ? ? ? ? ? ? ? ? //通過本地less文件覆蓋變量
? ? ? ? ? ? ? ? ? ? // true; @import "your-less-file-path.less";
? ? ? ? ? ? ? ? ? ? hack:`true;@import "${path.resolve(__dirname,'./src/common/cover_vant.less')}";`
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
}

修改完重新運行npm run serve才能看到效果。

vant組件的樣式修改

主要還是在VUE中使用vant組件，一些樣式的修改。

例如

一個picker組件

這樣的一個組件，我們修改他的樣式，這里是我修改過后的樣式，原來是白色的。

可以在app的樣式中加入

.van-dropdown-menu__bar {
   background: #6609f2 !important;
   box-shadow: none !important;
 }
.van-dropdown-menu__title,
.van-dropdown-menu__title--active {
   color: #fff !important;
 }

這里類名如何得知呢？通過網(wǎng)頁審查元素得到。

但這樣修改會產(chǎn)生一個問題，就是這個樣式成為全局的了。

別的頁面使用，也會是這樣一個樣式。

這個時候，可以在單獨頁面中設(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>

效果如圖

但后來又發(fā)現(xiàn)又有新的問題，子組件在相同的頁面，修改掉，但不能同時展現(xiàn)兩個。

后面靈機一動,又想到了一個新的方法

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>

加了一個btn 的類名：提高權(quán)限，限制樣式條件

css：

<style lang="less" >
.btn > .van-dropdown-menu__bar {
  background: #fff !important;
}
.btn .van-dropdown-menu__title {
  color: #333 !important;
}
</style>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: