如何调整Vant组件的Less变量以实现长尾词风格的效果？

本文共计737个文字，预计阅读时间需要3分钟。

目录- 修改vant的less变量- 修改vant组件的样式 - 例如：在app的样式中加入 - 效果如图- 后面精灵机一动，又想到了一个新的方法- 加了一个btn的类名：提高权限，限制样式条件- 修改vant的l样式

目录

• 修改vant的less样式变量
• vant组件的样式修改
• 例如
• 可以在app的样式中加入
• 效果如图
• 后面灵机一动,又想到了一个新的方法
• 加了一个btn 的类名：提高权限，限制样式条件

修改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组件，一些样式的修改。

例如

这样的一个组件，我们修改他的样式，这里是我修改过后的样式，原来是白色的。

可以在app的样式中加入

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

这里类名如何得知呢？通过网页审查元素得到。

但这样修改会产生一个问题，就是这个样式成为全局的了。

别的页面使用，也会是这样一个样式。

这个时候，可以在单独页面中设置，但要注意的是把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>

效果如图

但后来又发现又有新的问题，子组件在相同的页面，修改掉，但不能同时展现两个。

后面灵机一动,又想到了一个新的方法

html结构：

<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 的类名：提高权限，限制样式条件

css：

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。