vue在線動(dòng)態(tài)切換主題色方案
主要原理是利用webpack插件webpack-theme-color-replacer提取相關(guān)顏色css然后根據(jù)配置動(dòng)態(tài)生成替換的css
具體實(shí)現(xiàn)步驟如下:
1.添加webpack插件,新建文件webpack/themePlugin.js
const ThemeColorReplacer = require('webpack-theme-color-replacer') const forElementUI = require('webpack-theme-color-replacer/forElementUI') const config = require('../src/config/appConfig') module.exports = new ThemeColorReplacer({ fileName: 'css/theme-colors.[contenthash:8].css', matchColors: [ ...forElementUI.getElementUISeries(config.themeColor), //element-ui主色系列 // '#0cdd3a', //自定義顏色 ], changeSelector: forElementUI.changeSelector, isJsUgly: process.env.NODE_ENV !== 'development', // injectCss: false, // resolveCss(resultCss) { // optional. Resolve result css code as you wish. // return resultCss + youCssCode // } })
matchColors數(shù)組中可配置多個(gè)自定義要替換的主題色
2.在vue.config.js中添加這個(gè)插件
const themePlugin=require('./webpack/themePlugin'); module.exports = { configureWebpack: { plugins: [ themePlugin ] } }
3.新建文件themeColorClient.js
import client from 'webpack-theme-color-replacer/client' import forElementUI from 'webpack-theme-color-replacer/forElementUI' import appConfig from '@/config/appConfig' export let curColor = appConfig.themeColor // 動(dòng)態(tài)切換主題色 export function changeThemeColor(newColor) { var options = { newColors: [...forElementUI.getElementUISeries(newColor)], } return client.changer.changeColor(options, Promise) .then(() => { curColor = newColor localStorage.setItem('theme_color', curColor) }); } export function initThemeColor() { const savedColor = localStorage.getItem('theme_color') if (savedColor) { curColor = savedColor changeThemeColor(savedColor) } }
4.在需要的時(shí)候調(diào)用 initThemeColor初始化顏色 changeThemeColor改變主題顏色
import { initThemeColor,changeThemeColor } from './utils/themeColorClient' initThemeColor() changeThemeColor('#F56C6C')//傳入顏色格式應(yīng)該為十六進(jìn)制顏色值,'red'類似顏色暫不支持
具體細(xì)節(jié)請(qǐng)參考https://github.com/hzsrc/vue-element-ui-scaffold-webpack4
到此這篇關(guān)于vue在線動(dòng)態(tài)切換主題色方案的文章就介紹到這了,更多相關(guān)vue 動(dòng)態(tài)切換主題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue如何動(dòng)態(tài)獲取當(dāng)前時(shí)間
這篇文章主要介紹了vue如何動(dòng)態(tài)獲取當(dāng)前時(shí)間問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12vue?openlayers實(shí)現(xiàn)臺(tái)風(fēng)軌跡示例詳解
這篇文章主要為大家介紹了vue?openlayers實(shí)現(xiàn)臺(tái)風(fēng)軌跡示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11vue使用高德地圖實(shí)現(xiàn)添加點(diǎn)標(biāo)記和獲取點(diǎn)擊位置信息的示例代碼
這篇文章主要介紹了vue使用高德地圖實(shí)現(xiàn)添加點(diǎn)標(biāo)記和獲取點(diǎn)擊位置信息的示例代碼,文中補(bǔ)充介紹了高德vue-amap使用(一)標(biāo)記點(diǎn)位獲取地址及經(jīng)緯度,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-01-01vue之保留小數(shù)點(diǎn)兩位小數(shù) 使用filters(過濾器)
這篇文章主要介紹了vue之保留小數(shù)點(diǎn)兩位小數(shù) 使用filters(過濾器),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11vue項(xiàng)目啟動(dòng)后,js-base64依賴報(bào)錯(cuò)Cannot read properties
這篇文章主要介紹了vue項(xiàng)目啟動(dòng)后,js-base64依賴報(bào)錯(cuò)Cannot read properties of null(reading ‘replace’)問題,2024-05-05Vue3將虛擬節(jié)點(diǎn)渲染到網(wǎng)頁初次渲染詳解
這篇文章主要為大家介紹了Vue3將虛擬節(jié)點(diǎn)渲染到網(wǎng)頁初次渲染詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03