Vant3页面中css变量的使用

在使用 Vant3 开发单页面应用时，如果需要修改 css 变量的值，可以通过 ConfigProvider 全局配置来实现。

首先， 通过以下方式来全局注册组件：

import { createApp } from 'vue';
import { ConfigProvider } from 'vant';

const app = createApp();
app.use(ConfigProvider);

然后，通过 ConfigProvider 覆盖 CSS 变量：

ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个 ConfigProvider 组件，并通过 theme-vars 属性来配置一些主题变量。

<van-config-provider :theme-vars="themeVars">
  <van-form>
    <van-field name="rate" label="评分">
      <template #input>
        <van-rate v-model="rate" />
      </template>
    </van-field>
    <van-field name="slider" label="滑块">
      <template #input>
        <van-slider v-model="slider" />
      </template>
    </van-field>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</van-config-provider>

import { ref } from 'vue';

export default {
  setup() {
    const rate = ref(4);
    const slider = ref(50);

    // themeVars 内的值会被转换成对应 CSS 变量
    // 比如 sliderBarHeight 会转换成 `--van-slider-bar-height`
    const themeVars = {
      rateIconFullColor: '#07c160',
      sliderBarHeight: '4px',
      sliderButtonWidth: '20px',
      sliderButtonHeight: '20px',
      sliderActiveBackgroundColor: '#07c160',
      buttonPrimaryBorderColor: '#07c160',
      buttonPrimaryBackgroundColor: '#07c160',
    };

    return {
      rate,
      slider,
      themeVars,
    };
  },
};

ConfigProvider 仅影响它的子组件的样式，不影响全局 root 节点。

实例：修改顶部导航栏的背景色

代码如下：

<template>
  <van-config-provider :theme-vars="themeVars">
    <van-nav-bar :fixed="true" :placeholder="true">
       ......
    </van-nav-bar>
  </van-config-provider>

  <router-view/>

  <van-tabbar v-model="active" :fixed="true" :placeholder="true">
      ......
  </van-tabbar>
</template>

<script>

export default defineComponent({
  name: "MainView",

  setup () {
    const themeVars = {
      navBarBackgroundColor: '#2c3e50'
    }

    let active = ref(0)

    return {
      themeVars, active
    }
  }

})
</script>