效果图：
1.主题文件文件 2.准备引入的文件 utils下的index.js -> 替换class
export function toggleClass(element, className) { if (!element || !className) { return } element.className = className; }store下的index.js ->
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state:{ themecolor:'20a0ff'//默认为20a0ff }, mutations:{ //更新主题颜色 setThemeColor(state,curcolor){ this.state.themecolor = curcolor; } } }); export default store;3.引入 app.js
import '../theme/index.css' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import store from './store/index' Vue.use(ElementUI) const mountList = { app:'/index', } import app from './pages/app.vue' const { location: { pathname } } = window if(pathname === mountList.app){ console.log('首页') const appPage = new Vue({ el:'#app', store, render:h => h(app) }) }app.vue
<template> <div class=""> <el-radio-group v-model="themecolor"> <el-radio label="20a0ff">20a0ff</el-radio> <el-radio label="fa4f52">fa4f52</el-radio> <el-radio label="0000ff">0000ff</el-radio> <el-radio label="008000">00800</el-radio> </el-radio-group> <div class=""> <span class="wrapper"> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> <el-button type="info">信息按钮</el-button> </span> </div> </div> </template> <script> import '../../../assets/css/theme/20a0ff/index.css' import '../../../assets/css/theme/fa4f52/index.css' import '../../../assets/css/theme/0000ff/index.css' import '../../../assets/css/theme/008000/index.css' import {toggleClass} from '../utils/index' export default { data() { return {} }, mounted() { toggleClass(document.body, "custom-" + this.themecolor) }, computed: { themecolor: { get() { return this.$store.state.themecolor; }, set(val) { this.$store.commit('setThemeColor', val) } } }, watch: { themecolor: { handler() { toggleClass(document.body, "custom-" + this.themecolor) } } } } </script> <style scoped> </style>借鉴自：https://blog.csdn.net/young_Emily/article/details/78591261
