使用vue-antd動(dòng)態(tài)切換主題
vue-antd動(dòng)態(tài)切換主題
安裝依賴
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: {? ? ? ? ? ? ? //注意:此處不能給默認(rèn)值,否則會(huì)導(dǎo)致主題色動(dòng)態(tài)配置失敗 ? ? ? ? ? ? // 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文件夾創(chuàng)建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'), // 主色系列 ? // 改變樣式選擇器,解決樣式覆蓋問(wèn)題 ? 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';
然后項(xiàng)目啟動(dòng)起來(lái)后調(diào)用Vm.$u.updateTheme方法即可動(dòng)態(tài)改變主題色。
注意該方法傳值必須傳十六進(jìn)制的顏色,如果傳顏色對(duì)應(yīng)的英文字符可能會(huì)出錯(cuò).
如果自定義組件或者元素也需要統(tǒng)一管理主題色,則在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, // 解決開(kāi)發(fā)模式,打包時(shí)未提取CSS的問(wèn)題 ? } }
2.把main.ts中的import ‘ant-design-vue/dist/antd.css’;
修改為 import ‘ant-design-vue/dist/antd.less’;
修改css為less的時(shí)候,會(huì)報(bào)錯(cuò) .bezierEasingMixin()
解決方法是:先卸載less-loader
npm uninstall -D less-loader
再安裝less-loader@6.0.0
npm install -D less-loader@6.0.0
然后重新運(yùn)行項(xiàng)目即可
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
el-form表單el-form-item label不換行問(wèn)題及解決
這篇文章主要介紹了el-form表單el-form-item label不換行問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼
本文主要介紹了Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07Vue-cli3生成的Vue項(xiàng)目加載Mxgraph方法示例
這篇文章主要介紹了Vue-cli3生成的Vue項(xiàng)目加載Mxgraph方法示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05如何在Vue項(xiàng)目中添加接口監(jiān)聽(tīng)遮罩
這篇文章主要介紹了如何在Vue項(xiàng)目中添加接口監(jiān)聽(tīng)遮罩,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01Vue全局loading及錯(cuò)誤提示的思路與實(shí)現(xiàn)
這篇文章主要給大家介紹了關(guān)于Vue全局loading及錯(cuò)誤提示的思路與實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08Vue前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)代碼示例
在Vue.js開(kāi)發(fā)中我們經(jīng)常會(huì)遇到需要將數(shù)字格式化為保留兩位小數(shù)的情況,下面這篇文章主要給大家介紹了關(guān)于Vue前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)的相關(guān)資料,需要的朋友可以參考下2024-06-06