修改vant的less样式变量
qq_42372534 人气:5修改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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容