vue-element如何实现动态换肤存储

 更新时间:2023年04月25日 09:33:27   作者:微笑的鱼_  
这篇文章主要介绍了vue-element如何实现动态换肤存储问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

需要实现的效果

选择颜色块或者颜色选择器切换网站主题色,选择主题后保存到本地,下次打开页面是缓存的主题色

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

原理

根据ElementUI官网的自定义主题,新建一个样式文件:element-variables(或者参考官网生成),在文件中写入:

/* 改变主题色变量 */
$--color-primary: #409eff;
$--color-success: #67c23a;
/*....还可以定义更多变量*/

/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

//主要的一步:
:export {
  theme: $--color-primary;
}

在项目store文件夹中新建theme.js文件,用于存储主题色变化状态,代码如下

//引入element-variables文件,文件路径根据自己项目存放位置来
import variables from '@/assets/css/element-variables.scss'
const state = {
  theme: variables.theme
}

const getters = {
	theme: function (state) {
		return state.theme;
	}
};

const mutations = {
  CHANGE_SETTING: (state, { key, value }) => {
    // eslint-disable-next-line no-prototype-builtins
    if (state.hasOwnProperty(key)) {
      state[key] = value
    }
  }
}

const actions = {
  changeSetting({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

然后在store.js中引入theme.js

import Vue from 'vue';
import Vuex from 'vuex';
import theme from '@/store/theme.js';
Vue.use(Vuex);
export default new Vuex.Store({
	modules: {
		theme
	}
});

切换主图部分template代码如下:

<el-form-item label="可选主题" label-width="140px">
	<div class="color-box">
		<div 
			v-for="(item,i) in themeArr"
			:key="i"
			:class="['color-item',theme===item?'active':'']"
			:style="{backgroundColor:item}"
			@click="changeTheme(item)">
			<span v-if="theme===item" class="iconfont icon-f-right"></span>	
		</div>
	</div>
</el-form-item>
<el-form-item label="自定义主题" label-width="140px">
	<el-color-picker
		v-model="theme"
		:predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
		class="theme-picker"
		popper-class="theme-picker-dropdown"
	/>
</el-form-item>

script代码

const version = require('element-ui/package.json').version // element-ui version from node_modules
const ORIGINAL_THEME = '#409EFF' // default color

export default {
	data() {
		return {
			themeArr: ['#409EFF','#202225','#F56C6C','#FFAB42','#17a969','#888C8F'],
			chalk: '',
			theme: ORIGINAL_THEME,
		}
	},
	watch: {
		//异步监听theme的变化
		async theme(val,oldVal) {
	      if (typeof val !== 'string') return
	      const themeCluster = this.getThemeCluster(val.replace('#', ''))
	      const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
	      // console.log(themeCluster, originalCluster)
	
	      const $message = this.$message({
	        message: '  Compiling the theme',
	        customClass: 'theme-message',
	        type: 'success',
	        duration: 0,
	        iconClass: 'el-icon-loading'
	      })
	
	      const getHandler = (variable, id) => {
	        return () => {
	          const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
	          const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
	
	          let styleTag = document.getElementById(id)
	          if (!styleTag) {
	            styleTag = document.createElement('style')
	            styleTag.setAttribute('id', id)
	            document.head.appendChild(styleTag)
	          }
	          styleTag.innerText = newStyle
	        }
	      }
	
		  //  初次进入或刷新时动态加载CSS文件
	      if (!this.chalk) {
	        const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
	        await this.getCSSString(url, 'chalk')
	      }
	
	      const chalkHandler = getHandler('chalk', 'chalk-style')
	
	      chalkHandler()
	
	      const styles = [].slice.call(document.querySelectorAll('style'))
	        .filter(style => {
	          const text = style.innerText
	          return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
	        })
	      styles.forEach(style => {
	        const { innerText } = style
	        if (typeof innerText !== 'string') return
	        style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
	      })
	
	       // 将修改的主题保存到本地,下次打开页面是保存的主题色
	    	localStorage.setItem('theme',val)
	    	//调用vuex中改变主题色方法
			this.$store.dispatch('theme/changeSetting', {
		        key: 'theme',
		        value: val
		    })
	
	      $message.close()
	
	    },
	},
	methods: {
		updateStyle(style, oldCluster, newCluster) {
	      let newStyle = style
	      oldCluster.forEach((color, index) => {
	        newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
	      })
	      return newStyle
	    },
	    getCSSString(url, variable) {
	      return new Promise(resolve => {
	        const xhr = new XMLHttpRequest()
	        xhr.onreadystatechange = () => {
	          if (xhr.readyState === 4 && xhr.status === 200) {
	            this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
	            resolve()
	          }
	        }
	        xhr.open('GET', url)
	        xhr.send()
	      })
	    },
	    getThemeCluster(theme) {
	      const tintColor = (color, tint) => {
	        let red = parseInt(color.slice(0, 2), 16)
	        let green = parseInt(color.slice(2, 4), 16)
	        let blue = parseInt(color.slice(4, 6), 16)
	
	        if (tint === 0) { // when primary color is in its rgb space
	          return [red, green, blue].join(',')
	        } else {
	          red += Math.round(tint * (255 - red))
	          green += Math.round(tint * (255 - green))
	          blue += Math.round(tint * (255 - blue))
	
	          red = red.toString(16)
	          green = green.toString(16)
	          blue = blue.toString(16)
	
	          return `#${red}${green}${blue}`
	        }
	      }
	
	      const shadeColor = (color, shade) => {
	        let red = parseInt(color.slice(0, 2), 16)
	        let green = parseInt(color.slice(2, 4), 16)
	        let blue = parseInt(color.slice(4, 6), 16)
	
	        red = Math.round((1 - shade) * red)
	        green = Math.round((1 - shade) * green)
	        blue = Math.round((1 - shade) * blue)
	
	        red = red.toString(16)
	        green = green.toString(16)
	        blue = blue.toString(16)
	
	        return `#${red}${green}${blue}`
	      }
	
	      const clusters = [theme]
	      for (let i = 0; i <= 9; i++) {
	        clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
	      }
	      clusters.push(shadeColor(theme, 0.1))
	      return clusters
	    },
		// 颜色块点击切换主题事件
		changeTheme(item) {
		  this.theme = item
	      this.$store.dispatch('theme/changeSetting', {
	        key: 'theme',
	        value: item
	      })
		},
	},
	mounted() {
		//从本地存储获取保存的主题
		if(localStorage.getItem("theme")) {
			this.theme = localStorage.getItem("theme")
			this.$store.dispatch('theme/changeSetting', {
		        key: 'theme',
		        value: this.theme
		    })
		}
	}
}

颜色块选择样式style:

.color-box {
	display: flex;
	flex-wrap: wrap;
	.color-item {
		position: relative;
		margin: 2px;
		width: 34px;
		height: 34px;
		border-radius: 3px;
		border: 2px solid transparent;
		cursor: pointer;
		span {
			position: absolute;
			right: 0;
			top: 0;
			width: 15px;
			height: 15px;
			background-color: #000;
			color: #fff;
			font-size: 10px;
    	text-align: center;
		}
		&.active {
			border-color: #000;
		}
	}
}

最后感谢:vue-element-admin作者 本实现方案借鉴于此

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue2中如何使用全局事件总线实现任意组件间通信

    Vue2中如何使用全局事件总线实现任意组件间通信

    全局事件总线就是一种组件间通信的方式,适用于任意组件间通信,下面这篇文章主要给大家介绍了关于Vue2中如何使用全局事件总线实现任意组件间通信的相关资料,需要的朋友可以参考下
    2022-12-12
  • Vue2 轮播图slide组件实例代码

    Vue2 轮播图slide组件实例代码

    这篇文章主要介绍了Vue2 轮播图slide组件实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • VUE数组根据索引删除数据,页面同时更新的实现方法

    VUE数组根据索引删除数据,页面同时更新的实现方法

    这篇文章主要介绍了VUE数组根据索引删除数据,页面同时更新的实现方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Vue子组件调用父组件方法案例详解

    Vue子组件调用父组件方法案例详解

    这篇文章主要介绍了Vue子组件调用父组件方法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • el-table表格动态合并相同数据单元格(可指定列+自定义合并)

    el-table表格动态合并相同数据单元格(可指定列+自定义合并)

    工作时遇到的el-table合并单元格的需求,本文主要介绍了el-table表格动态合并相同数据单元格(可指定列+自定义合并),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具

    vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具

    这篇文章主要为大家介绍了vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具的踩坑分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • Vue简化用户查询/添加功能的实现

    Vue简化用户查询/添加功能的实现

    本文主要介绍了Vue简化用户查询/添加功能的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • Vue使用echarts的完整步骤及解决各种报错

    Vue使用echarts的完整步骤及解决各种报错

    最近在项目中需要对数据进行可视化处理,而众所周知echarts是非常强大的插件,下面这篇文章主要给大家介绍了关于Vue使用echarts的完整步骤及解决各种报错的相关资料,需要的朋友可以参考下
    2022-05-05
  • Vue开发中Jwt的使用详解

    Vue开发中Jwt的使用详解

    Vue中使用JWT进行身份认证也是一种常见的方式,它能够更好地保护用户的信息,本文主要介绍了Vue开发中Jwt的使用详解,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • 基于Axios 常用的请求方法别名(详解)

    基于Axios 常用的请求方法别名(详解)

    下面小编就为大家分享一篇Axios 常用的请求方法别名,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03

最新评论