vue 实现主题换肤(element-ui)
一. 插件安装
npm i webpack-theme-color-replacer -D
二. 项目使用
vue.config.js
const webpack = require('webpack')
const ThemeColorReplacer = require('webpack-theme-color-replacer')
const forElementUI = require('webpack-theme-color-replacer/forElementUI')
const appConfig = require('./config/app-config')
module.exports = {
configureWebpack: {
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new ThemeColorReplacer({
fileName: 'style/theme-colors.[contenthash:8].css',
matchColors: [
...forElementUI.getElementUISeries(appConfig.themeColor),
'#0cdd3a',
'#c655dd'
],
changeSelector: forElementUI.changeSelector,
isJsUgly: process.env.NODE_ENV === 'production' ? true : undefined
})
]
}
}
新建app-config.js
module.exports = {
LOGIN_PATH: './',
title: 'vue + webpack4 + element-ui脚手架项目',
description: 'vue + webpack4 + element-ui脚手架项目',
themeColor: '#3296fa'
}
2.3 新建themeColorClient.js
import client from 'webpack-theme-color-replacer/client'
import forElementUI from 'webpack-theme-color-replacer/forElementUI'
import appConfig from '../../config/app-config'
export let curColor = appConfig.themeColor
export function changeThemeColor(newColor) {
var options = {
newColors: [...forElementUI.getElementUISeries(newColor), '#ff0000', '#ffff00']
}
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)
}
}
使用
main.js 初始化文件
import './style/element-variables.scss'
import { initThemeColor } from './utils/themeColorClient'
initThemeColor()
新建文件 element-variables.scss
$--color-primary: #3296fa;
$input-color: #008CEE;
$disabled-color: #F5F7FA;
$--color-text-placeholder: #ccc !default;
$--font-color-disabled-base: #333 !default;
$--background-color-base: #F5F7FA !default;
$--border-color-base: #C4CBDA !default;
$--radio-button-disabled-checked-fill: #333 !default;
$--select-option-disabled-color: #333 !default;
$--input-fill-disabled: #333 !default;
$--input-disabled-color: #333 !default;
$--border-color-hover: $--color-primary !default;
$--select-border-color-hover: $--border-color-hover !default;
$--select-input-focus-border-color: $input-color !default;
$--select-input-focus-border-color: $--color-primary !default;
$--input-focus-border: $input-color !default;
$--select-option-selected-hover: #EBF5FF !important;
$--select-option-hover-background: #EBF5FF !default;
$--select-option-selected-font-color: $--color-primary !default;
$--select-option-selected-hover: $--color-primary !default;
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
在项目中使用
<el-color-picker
size="small"
@change="changeColor"
v-model="mainColor">
el-color-picker>
import { changeThemeColor, curColor } from '@/utils/themeColorClient'
export default{
data() {
return {
mainColor: curColor
}
},
methods: {
changeColor(newColor) {
changeThemeColor(newColor).then(() => {
this.$message.success('主题色切换成功~')
})
}
}
}
转载
https://www.it610.com/article/1294293052231327744.htm