Elementui 动态换肤

ThemePicker.vue

<template><el-tooltip effect="dark" content="theme" placement="bottom"><el-color-picker v-model="theme" class="theme-picker" size="small" popper-class="theme-picker-dropdown" /></el-tooltip>
</template><script>const version = require('element-ui/package.json').version // element-ui version from node_modules
const ORIGINAL_THEME = '#409EFF' // default colorexport default {name: "ThemePicker",data() {return {chalk: '', // content of theme-chalk csstheme: ORIGINAL_THEME}},watch: {theme(val, oldVal) {if (typeof val !== 'string') returnconst themeCluster = this.getThemeCluster(val.replace('#', ''))const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))console.log(themeCluster, originalCluster)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 = newStyleconsole.log(newStyle);}}const chalkHandler = getHandler('chalk', 'chalk-style')if (!this.chalk) {const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`this.getCSSString(url, chalkHandler, 'chalk')} else {chalkHandler()}const styles = [].slice.call(document.querySelectorAll('style')).filter(style => {const text = style.innerTextreturn new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)})styles.forEach(style => {const { innerText } = styleif (typeof innerText !== 'string') returnstyle.innerText = this.updateStyle(innerText, originalCluster, themeCluster)})this.$message({message: '换肤成功',type: 'success'})}},methods: {updateStyle(style, oldCluster, newCluster) {let newStyle = styleoldCluster.forEach((color, index) => {newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])})return newStyle},getCSSString(url, callback, variable) {const xhr = new XMLHttpRequest()xhr.onreadystatechange = () => {if (xhr.readyState === 4 && xhr.status === 200) {this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')callback()}}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 spacereturn [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}}
}
</script>

Elementui动态换肤相关推荐

VUE+ElementUI项目换肤功能
VUE+ElementUI项目换肤功能一.固定多套主题换肤设置页面 (views/layout.vue) themes.js (@/utils/themes) main.js css相关结构及内容 ...
Element UI 自定义动态换肤（主题）
需求背景:项目需要支持动态换主题,主题色可以随意选择(即用户想用什么颜色的主题就用什么颜色的主题):而element官网给的自定义主题只能是项目里写死,无法实现用户动态切换: 方式一:调接口加载C ...
7：MD5、圆形图片、动态换肤
1.获取一个文件的MD5值(可处理大文件) public static String getSkinMD5(File file) {FileInputStream fis = null;BigInte ...
asp.net动态换肤
直接上Demo:asp.net动态换肤.zip 转载于:https://www.cnblogs.com/wifi/articles/2484600.html
android 状态栏背景色_技术一面：说说Android动态换肤实现原理
换肤分为动态换肤和静态换肤静态换肤这种换肤的方式,也就是我们所说的内置换肤,就是在APP内部放置多套相同的资源.进行资源的切换. 这种换肤的方式有很多缺点,比如, 灵活性差,只能更换内置的资源.a ...
hybird之web动态换肤实现
前言最近在重构个hybird(原生的壳包着Web页面)的UI框架,进行到了做换肤功能的阶段,所以这里是我思考的解决的方法. 预想目前实现换肤的功能无非就两种做法. 1.写几个皮肤文件,然后切换使用 ...
vue3.0+ts+element-plus多页签应用模板：element-plus按需引入与动态换肤
目录系列链接一.安装element-plus 二.按需引入 1. 为什么要按需引入? 2. 如何按需引入? 3. 验证是否引入成功三.动态换肤 1. 制作自定义主题 2. 引入自定义主题 3. ...
Android插件化开发实现动态换肤
今晚实在不想coding,于是想着整理点知识点,那么简单整理了下插件化开发实现动态更换皮肤.插件化开发大家应该不陌生或多或少用过或听过,插件化开发在项目业务拓展.模块化等方面有不小优势,当然实现一个完 ...
编程小问题系列（3）如何动态换肤
编程小问题系列(3)动态换肤群里有人在问如何动态换肤.也就不讲了直接上代码. /Files/helloj2ee/mumu_userselectskin.rar 转载于:https://www.cn ...

Elementui动态换肤

Elementui 动态换肤

ThemePicker.vue

Elementui动态换肤相关推荐

最新文章

热门文章