vue + ElementUI + el-color-picker实现选择颜色更换主题皮肤

最新推荐文章于 2024-08-23 23:30:24 发布

易子辰丶

最新推荐文章于 2024-08-23 23:30:24 发布

阅读量2k

点赞数

分类专栏：前端技术文章标签： vue.js javascript less

本文链接：https://blog.csdn.net/HockJerry/article/details/117651828

版权

前端技术专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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>