动态更换ant-design-vue主题颜色

刚开始接触新的业务需要用到ant.ui框架(https://antdv.com/docs/vue/customize-theme-cn/)

1.vue.config.js定制主题

官方的说明是直接在vue.config.js里面直接写明，项目启用直接引用该主题颜色

微信截图_20210817140516.png

  // css相关配置
css: {
    // 启用 CSS modules
    requireModuleExtension: true,
    // 是否使用css分离插件
    extract: false,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
        less: { 
            lessOptions: {
                modifyVars: {
                    'primary-color': '#007ac3',// 全局主色
                },
                javascriptEnabled: true,
            },
            prependData: `@import "@src/styles/theme/index.less";`,// 引用自定义的主色
         },
    },
},  

2.覆盖主题

直接在src目录下新建style文件夹，将需要修改的类名都放进一个less文件，在main.js中直接引用，直接进行覆盖；注意：当tab或者下拉框之类的还会有个过渡闪烁问题;

微信截图_20210817144034.png

微信截图_20210817143612.png

3.动态切换颜色

还是继续在src目录下新建style文件夹，创建3个文件

微信截图_20210817150910.png

微信截图_20210817150935.png

微信截图_20210817150954.png

微信截图_20210817151113.png

微信截图_20210817151531.png

微信截图_20210817151549.png