vant自定义导航栏NavBar

  • Post author:
  • Post category:vue

vant 如何定制主题,以NavBar 导航栏为例。

这里 vant 是使用全局引入的方式

第一步:手动引入样式

在 main.js 里引入,要把css 的后缀名改为 less

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 导入vant
import Vant from 'vant'
// 为了能够覆盖默认的 less 变量,这里要把css 的后缀名改为 less
import 'vant/lib/index.less'

Vue.use(Vant)
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

第二步,在src目录下新建一个 theme.less 文件

第三步: vue-cli 搭建的项目,在 vue.config.js(没有就在最外面新建) 中进行配置

// 这个文件是 vue-cli 创建出来的项目的配置文件
// 在 vue.config.js 这个配置文件中,可以对整个项目的打包,构建进行全局性的配置

// webpack 在进行打包的时候,底层用到了 node.js
// 因此,在 vue.config.js 配置文件中,可以导入并使用 node.js 中的核心模块
const path = require('path')
const themePath = path.join(__dirname, './src/theme.less')
module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0,请移除 lessOptions 这一级,直接配置选项。
        lessOptions: {
          modifyVars: {
            // 1、直接覆盖变量(一般不用,因为每次改之后,要重新运行)
            //'text-color': '#111',
            //'border-color': '#eee',
            // 2、这里通过 less 文件覆盖(文件路径为绝对路径)
            hack: `true; @import "${themePath}";`,
          },
        },
      },
    },
  },
};

第四步:在第二步新建的 theme.less 文件中配置
下面是 NavBar 导航栏提供的 less 变量
在这里插入图片描述

// 在 theme.less 文件中,覆盖 Vant 官方的 less 变量值
@blue: red;

// 覆盖 Navbar 的 less 样式
@nav-bar-background-color: @blue;
@nav-bar-title-text-color: #ffffff;

注意像 @nav-bar-background-color 这些是不可以改变的,后面记得加分号’;’

大功告成


版权声明:本文为weixin_47124112原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。