vue2实现自定义主题webpack-theme-color-replacer

需求:根据element的自定义主题色,之后改变element的全局所有颜色,解决页面刷新后主题色失效问题,这个需要把颜色存入到浏览器的存储中,如果换个浏览器就得重新选择了哈,如果需要在不同的浏览器保持一致的主题,需要跟后端沟通

之前还写过一个简单的,有需要的可以去看:vue实现element-ui自定义主题色切换(简单版)_element主题切换_请叫我欧皇i的博客-CSDN博客

效果如下:

1.下载颜色插件

我下的是1.4.6版本,最好下载的版本一致吧,不然报错了我也没办法

javascript 复制代码
npm install webpack-theme-color-replacer@1.4.6

2.建个js文件themeColorClient.js

直接复制粘贴以下代码

javascript 复制代码
import client from 'webpack-theme-color-replacer/client'
import forElementUI from 'webpack-theme-color-replacer/forElementUI'
// 注意自己项目里的引入路径

export let curColor = '#409EFF'

// 动态切换主题色
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)
  }
}

3.在main.js文件导入

保证每次刷新数据还在

javascript 复制代码
import { initThemeColor } from './plugins/themeColorClient'
initThemeColor()

4.颜色选择器

javascript 复制代码
<template>
  <el-color-picker v-model="mainColor" size="small" @change="changeColor" />
</template>

<script>
import { changeThemeColor, curColor } from "@/plugins/themeColorClient";
export default {
  name: "d2-header-color",
  data() {
    return {
      mainColor: curColor,
      predefine: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
      ],
    };
  },
  methods: {
    changeColor(newColor) {
      console.log(newColor, "颜色");
      changeThemeColor(newColor)
        .then((t) => console.log("123465"))
        .catch((err) => console.log(err, "567"));
      //.then(t => this.$x.toast.success('主题色切换成功~'))
    },
  },
};
</script>

5.在vue.config.js中配置

javascript 复制代码
const ThemeColorReplacer = require('webpack-theme-color-replacer')
const forElementUI = require('webpack-theme-color-replacer/forElementUI')
module.exports = {
  chainWebpack: config => {
       // 自定义主题色
    config
      .plugin('theme-color-replacer')
      .use(ThemeColorReplacer, [{
        fileName: 'style/theme-colors.[contenthash:8].css',
        matchColors: [
          ...forElementUI.getElementUISeries(process.env.VUE_APP_ELEMENT_COLOR), // Element-ui主色系列
          '#0cdd3a', // 自定义颜色
          '#c655dd'
        ],
        changeSelector: forElementUI.changeSelector,
        // 解决history模式下路由跳转样式不生效问题
        injectCss: true,
        isJsUgly: process.env.NODE_ENV === 'production' ? true : undefined
      }])
}
    
}

这样就可以实现了,文章到此结束,希望对你有所帮助~有不懂的可以在评论区联系我

相关推荐
永乐春秋13 分钟前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿15 分钟前
【前端】CSS
前端·css
ggdpzhk16 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic6 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā6 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue