如何修改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;
 }

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

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

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

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue数组响应式操作及高阶函数使用代码详解

    Vue数组响应式操作及高阶函数使用代码详解

    这篇文章主要介绍了Vue数组响应式操作及高阶函数使用代码详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • 关于新建的vue3项目一直提示代码格式警告的问题

    关于新建的vue3项目一直提示代码格式警告的问题

    这篇文章主要介绍了关于新建的vue3项目一直提示代码格式警告的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 基于Vue.js与WordPress Rest API构建单页应用详解

    基于Vue.js与WordPress Rest API构建单页应用详解

    这篇文章主要介绍了基于Vue.js与WordPress Rest API构建单页应用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • vuepress打包之后页面样式丢失问题的两种解决方式

    vuepress打包之后页面样式丢失问题的两种解决方式

    这篇文章主要介绍了vuepress打包之后页面样式丢失问题的两种解决方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue组件间的参数传递实例详解

    vue组件间的参数传递实例详解

    这篇文章主要介绍了vue组件间的参数传递 ,需要的朋友可以参考下
    2019-04-04
  • 大前端代码重构之事件拦截iOS Flutter Vue示例分析

    大前端代码重构之事件拦截iOS Flutter Vue示例分析

    这篇文章主要为大家介绍了大前端代码重构之事件拦截iOS Flutter Vue示例分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • Vue+ElementUI实现从后台动态填充下拉框的示例代码

    Vue+ElementUI实现从后台动态填充下拉框的示例代码

    本文主要介绍了Vue+ElementUI实现从后台动态填充下拉框的示例代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • Element Plus的el-icon怎么用

    Element Plus的el-icon怎么用

    在Element Plus里,Icon图标的用法和以前不一样了,本文主要介绍了Element Plus的el-icon怎么用,具有一定的参考价值,感兴趣的可以了解一下
    2022-04-04
  • vuex使用方法超详细讲解(实用)

    vuex使用方法超详细讲解(实用)

    这篇文章主要给大家介绍了关于vuex使用方法的相关资料,主要内容包括Vuex的安装和配置,以及如何在.vue文件中引入和使用Vuex状态,作者还分享了一种在模块中存储状态的建议方法,并提供了具体的代码示例,需要的朋友可以参考下
    2024-10-10
  • vue-router中的钩子函数和执行顺序说明

    vue-router中的钩子函数和执行顺序说明

    这篇文章主要介绍了vue-router中的钩子函数和执行顺序说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07

最新评论