Vue-Antd如何实现动态切换长尾词主题效果？

本文共计1252个文字，预计阅读时间需要6分钟。

目录：Vue + Antd 动态切换主题 + 安装依赖 + Vue3.0 + Antd，修改 Antd 主题色，全局配置 CSS + Vue + Antd 动态切换主题 + 安装依赖：1. webpack-theme-color-replacer

bashyarn add webpack-theme-color-replacer@1.3.222 less@2

目录

• vue-antd动态切换主题
• 安装依赖
• Vue3.0 + Antd，修改antd主题色，配置全局css

vue-antd动态切换主题

安装依赖

1 webpack-theme-color-replacer: yarn add webpack-theme-color-replacer@1.3.22 2 less: yarn add less@2.7.2 3 less-loader: yarn add less-loader@7.0.2

在vue.config.js中加入配置

const createThemeColorReplacerPlugin = require("./plugin.config"); const vueConfig = {   css: {     loaderOptions: {       less: {         lessOptions: {           modifyVars: {              //注意：此处不能给默认值，否则会导致主题色动态配置失败             // less vars，customize ant design theme             //'primary-color': '#2f54eb',             //'link-color': '#2f54eb',             //'border-radius-base': '4px'           },           // DO NOT REMOVE THIS LINE           javascriptEnabled: true,         },       },     },   },   configureWebpack: {     plugins: [createThemeColorReplacerPlugin()],   },   assetsDir: "static", }; module.exports = vueConfig;

添加主题色更改方法，新建util文件夹创建plugin.config.js

const ThemeColorReplacer = require('webpack-theme-color-replacer') const generate = require('@ant-design/colors/lib/generate').default const getAntdSerials = (color) => {   // 淡化（即less的tint）   const lightens = new Array(9).fill().map((t, i) => {     return ThemeColorReplacer.varyColor.lighten(color, i / 10)   })   const colorPalettes = generate(color)   const rgb = ThemeColorReplacer.varyColor.toNum3(color.replace('#', '')).join(',')   return lightens.concat(colorPalettes).concat(rgb) } const themePluginOption = {   fileName: 'css/theme-colors-[contenthash:8].css',   matchColors: getAntdSerials('#1890ff'), // 主色系列   // 改变样式选择器，解决样式覆盖问题   changeSelector (selector) {     switch (selector) {       case '.ant-calendar-today .ant-calendar-date':         return ':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' + selector       case '.ant-btn:focus,.ant-btn:hover':         return '.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger)'       case '.ant-btn.active,.ant-btn:active':         return '.ant-btn.active:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:active:not(.ant-btn-primary):not(.ant-btn-danger)'       case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':       case '.ant-steps-item-process .ant-steps-item-icon>.ant-steps-icon':         return ':not(.ant-steps-item-process)' + selector       case '.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover':       case '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-submenu-selected,.ant-menu-horizontal > .ant-menu-submenu:hover':         return '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover'       case '.ant-menu-horizontal > .ant-menu-item-selected > a':       case '.ant-menu-horizontal>.ant-menu-item-selected>a':         return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item-selected > a'       case '.ant-menu-horizontal > .ant-menu-item > a:hover':       case '.ant-menu-horizontal>.ant-menu-item>a:hover':         return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item > a:hover'       default :         return selector     }   } } const createThemeColorReplacerPlugin = () => new ThemeColorReplacer(themePluginOption) module.exports = createThemeColorReplacerPlugin

添加util.js文件

import client from "webpack-theme-color-replacer/client"; import generate from "@ant-design/colors/lib/generate"; function getAntdSerials(color) {   // 淡化（即less的tint）   const lightens = new Array(9).fill().map((t, i) => {     return client.varyColor.lighten(color, i / 10);   });   // colorPalette变换得到颜色值   const colorPalettes = generate(color);   const rgb = client.varyColor.toNum3(color.replace("#", "")).join(",");   return lightens.concat(colorPalettes).concat(rgb); } function changeColor(newColor) {   var options = {     newColors: getAntdSerials(newColor), // new colors array, one-to-one corresponde with `matchColors`     changeUrl(cssUrl) {       return `/${cssUrl}`; // while router is not `hash` mode, it needs absolute path     },   };   return client.changer.changeColor(options, Promise); } export default {   updateTheme(newPrimaryColor) {     const hideMessage = () => console.log("正在切换主题！", 0);     changeColor(newPrimaryColor).finally((t) => {       setTimeout(() => {         hideMessage();       });     });   }, };

然后在main.js中引入为Vue原型prototype中的方法

import utils from "./utils" Vue.prototype.$u = utils //注意antd样式的引入必须由css改为less引入 - import 'ant-design-vue/dist/antd.css'; + import 'ant-design-vue/dist/antd.less';

然后项目启动起来后调用Vm.$u.updateTheme方法即可动态改变主题色。

注意该方法传值必须传十六进制的颜色，如果传颜色对应的英文字符可能会出错.

如果自定义组件或者元素也需要统一管理主题色，则在assets目录新建main.less

@import "~ant-design-vue/dist/antd.less"; #home {   color: @primary-color; }

在main.less中引入antd的样式，然后antd的主题色是@primary-color， 直接使用即可

然后在main.js中直接引入main.less

- import 'ant-design-vue/dist/antd.less'; + import "./assets/css/main.less"

Vue3.0 + Antd，修改antd主题色，配置全局css

1.在vue.config.js里修改配置

module.exports = {   css: {     loaderOptions: {       less: {         lessOptions: {           modifyVars: {             'primary-color': '#3d62ff',// 修改全局主题色           },           javascriptEnabled: true,         },       },     },     extract: true, // 解决开发模式，打包时未提取CSS的问题   } }

2.把main.ts中的import ‘ant-design-vue/dist/antd.css’;

修改为 import ‘ant-design-vue/dist/antd.less’;

修改css为less的时候，会报错 .bezierEasingMixin()

解决方法是：先卸载less-loader

npm uninstall -D less-loader

再安装less-loader@6.0.0

npm install -D less-loader@6.0.0

然后重新运行项目即可

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。