位置: IT常识 - 正文

使用vue-antd动态切换主题(vue 动态tab)

编辑：rootadmin

这篇文章主要介绍了使用vue-antd动态切换主题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教目录

推荐整理分享使用vue-antd动态切换主题(vue 动态tab)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:ant design vue 动态菜单,antd-vue-pro,vue中如何实现动态组件,ant design vue 动态菜单,antd vue pro 动态路由,antd vue pro 动态路由,antd vue pro 动态路由,antd vue pro 动态路由,内容如对您有帮助，希望把文章链接给更多的朋友！

vue-antd动态切换主题安装依赖Vue3.0 + Antd，修改antd主题色，配置全局cssvue-antd动态切换主题安装依赖1 webpack-theme-color-replacer: yarn add webpack-theme-color-replacer@1.3.222 less: yarn add less@2.7.23 less-loader: yarn add less-loader@7.0.2

在vue.config.js中加入配置

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

const ThemeColorReplacer = require('webpack-theme-color-replacer')const generate = require('@ant-design/colors/lib/generate').defaultconst 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的问题 }}