1.安装
需要安装ElementUI 使用其中的el-color-picker颜色选择组件,另外还需要安装less-loader,less可能会出现错误,参考:https://blog.csdn.net/HockJerry/article/details/115672928,里面同样的方法
2.文件目录
3.内容
app-config.js
/* app-config.js */
module.exports = {
LOGIN_PATH: './',
title: 'vue + webpack4 + element-ui脚手架项目',
description: 'vue + webpack4 + element-ui脚手架项目',
themeColor: '#409EFF' // 这个色号必须和主题色是一个颜色才行,要不然出来的css模板文件是空的
}
themeColorClient.js
/* 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)]
}
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 Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);
import { initThemeColor } from "./utils/themeColorClient";
initThemeColor();
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
vue.config.js
/* 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.js')
module.exports = {
configureWebpack: {
plugins: [
// 生成仅包含颜色的替换样式(主题色等)
new ThemeColorReplacer({
fileName: 'style/theme-colors.[contenthash:8].css',
matchColors: [
...forElementUI.getElementUISeries(appConfig.themeColor)
],
changeSelector: forElementUI.changeSelector,
isJsUgly: process.env.NODE_ENV === 'production' ? true : undefined
})
]
}
}
change.vue这里面的颜色切换只支持16进制的
<template>
<div class="home">
<div class="head"></div>
<el-button type="primary">主要按钮</el-button>
<el-color-picker
size="medium"
@change="changeColor">
</el-color-picker>
<div>
<span class="font-test">
看我到底变不变色
</span>
<span class="font-test1">
看我到底变不变色
</span>
</div>
</div>
</template>
<script>
import { changeThemeColor } from '@/utils/themeColorClient'
export default {
name: "Home",
data() {
return {
}
},
methods: {
changeColor(newColor) {
changeThemeColor(newColor).then((res) => {
console.log(res)
})
}
}
}
</script>
<style lang="less" scoped>
.head{
height:100px;
width: 100%;
background-color: #409EFF;
}
.font-test{
font-size: 20px;
line-height: 40px;
color: #409EFF;
}
.font-test1{
font-size: 20px;
line-height: 40px;
color: #000000;
}
</style>