vite Ant Design Vue 动态主题

标签：Vue const Ant reactive colorState vue Design ConfigProvider import

简单记录一下。

官网地址：https://www.antdv.com/docs/vue/customize-theme-cn

antd全局化配置：https://www.antdv.com/components/config-provider-cn

开始没懂怎么去使用，查了资料也没有实现ConfigProvider配置的效果。

整理一下思路，使用ConfigProvider进行配置，不考虑动态的情况下静态配置怎么生效？

配置App.vue

 1 <!-- APP.vue -->
 2 <template>
 3   <a-config-provider>
 4     <router-view />
 5   </a-config-provider>
 6 </template>
 7 <script setup>
 8 import { reactive } from "vue";
 9 import { ConfigProvider } from "ant-design-vue";
10 
11 // 直接官网复制的代码
12 const colorState = reactive({
13   primaryColor: "#25b864",
14   errorColor: "#ff4d4f",
15   warningColor: "#faad14",
16   successColor: "#52c41a",
17   infoColor: "#1890ff",
18 });
19 ConfigProvider.config({
20   theme: colorState,
21 });
22 </script>

HelloWorld.vue：

<template>
  <a-card>
    <a-row justify="center">
      <a-col>
        <input type="color" :value="colorState.primaryColor" @input="e => onColorChange('primaryColor', e)" />
      </a-col>
    </a-row>
    <br />
    <a-row gutter="20" align="middle" justify="center">
      <a-col>
        <a-checkbox v-model:checked="checked">Checkbox</a-checkbox>
      </a-col>
      <a-col>
        <a-button type="primary">Primary</a-button>
      </a-col>
      <a-col>
        <a-button>Default</a-button>
      </a-col>
      <a-col>
        <a-button type="dashed">Dashed</a-button>
      </a-col>
      <a-col>
        <a-button type="text">Text</a-button>
      </a-col>
      <a-col>
        <a-button type="link">Link</a-button>
      </a-col>
      <a-col>
        <a-button type="primary" @click="info">HelloWorld</a-button>
      </a-col>
      <a-col>
        <a-checkable-tag checked>CheckableTag</a-checkable-tag>
      </a-col>
    </a-row>
  </a-card>

</template>
<script setup>
// 引入配置
import {  ConfigProvider } from "ant-design-vue";
import { ref, reactive } from "vue";

const checked = ref(false);

//与app.vue一致
const colorState = reactive({
  primaryColor: "#25b864",
});
const onColorChange = (type, e) => {
  console.log(type, e.target.value, "颜色");
  Object.assign(colorState, {
    [type]: e.target.value,
  });
  ConfigProvider.config({
    theme: colorState,
  });
};

</script>

但是没得效果：

生效：

文档：需要引入替换当前项目引入样式文件为 CSS Variable 版本。

引入：

// main.js
import "ant-design-vue/dist/antd.variable.min.css";

引入后在vite.config.中修改

 1 AntDesignVueResolver({  importStyle: false }) 

刷新： 此时主题就生效了。

 

最后：colorState 参数放进状态管理里面。

 

标签：Vue,const,Ant,reactive,colorState,vue,Design,ConfigProvider,import
From： https://www.cnblogs.com/wq2333/p/16816660.html