vue中element自定义主题

仅替换主题色

单纯的只是想换个主题颜色请参考ElementUI官网的自定义主题。
链接: https://element.eleme.cn/#/zh-CN/component/custom-theme.

实现自定义主题

封装动态换肤色ThemePicker.vue组件。

<template><el-color-pickerclass="theme-picker"popper-class="theme-picker-dropdown"v-model="theme":disabled="disabled":predefine="predefine":size="size"></el-color-picker>
</template><script>const version = require('element-ui/package.json').version // element-ui version from node_modulesconst ORIGINAL_THEME = '#409EFF' // default colorexport default {name: 'ThemePicker',props: {// 是否禁用disabled: {type: Boolean},// 预定义颜色 ()predefine: {type: Array},// 默认初始化主题default: {type: String,default: ""+localStorage.getItem("tremePackers")+""},// 尺寸size: {type: String,default: 'small'}},data() {return {chalk: '', // content of theme-chalk csstheme: ORIGINAL_THEME,showSuccess: true, // 是否弹出换肤成功消息}},mounted() {if(this.default != null) {this.theme = this.default// this.$emit('onThemeChange', this.theme)this.showSuccess = false}},watch: {theme(val, oldVal) {if (typeof val !== 'string') returnconst themeCluster = this.getThemeCluster(val.replace('#', ''))const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))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}}// 替换主题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 {// 这里可以写自己想要的逻辑（如： 改变布局等情况）// console.log(val)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.$emit('onThemeChange', val)//存入localStoragelocalStorage.setItem('tremePackers',val);if(this.showSuccess) {this.$message({message: '换肤成功',type: 'success'})} else {this.showSuccess = true}}},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><style>.theme-picker .el-color-picker__trigger {vertical-align: middle;}.theme-picker-dropdown .el-color-dropdown__link-btn {display: none;}
</style>

使用方法：

<wb-themePicker></wb-themePicker>

参数说明：

参数	说明	类型	可选	默认	必填
default	默认颜色（不保存颜色）	String	-	-	否
size	颜色选择器大小	String	medium / small / mini	small	否
disabled	是否禁用	Boolean	true/ false	false	否
predefine	预定义颜色	Array	[]	-	否

event事件：

参数	说明	回调参数
onThemeChange	当颜色值变化时触发（第一次进来也会触发）	value

vue中element自定义主题相关推荐

Vue学习笔记：Vue中封装自定义步骤条实现上下一步
Vue中封装自定义步骤条实现上下一步效果图: 如上图:在VUE中实现效果,VUE+Element,ant都有封装好的UI,直接引用就好了: 这里,觉得样式不符合UI设计,所以自定义封装了一个步骤条 ...
如何在Angular Material中制作自定义主题
by Charlee Li 通过李李如何在Angular Material中制作自定义主题 (How to make a custom theme in Angular Material) Angu ...
android设置主题的方法,Android_修改Android App样式风格的方法，android中可以自定义主题和风格 - phpStudy...
修改Android App样式风格的方法 android中可以自定义主题和风格.风格,也就是style,我们可以将一些统一的属性拿出来,比方说,长,宽,字体大小,字体颜色等等.可以在res/value ...
vue中更改 element-ui主题色
第一步打开"elementUI官网" 点击"自定义主题", 找到"在线主题生成工具" 第二步点击"在线主题生成工具" ...
关于element-plus按需引入时，在vite中使用自定义主题失效的问题解决
1. 问题产生过程描述: 1)使用vite创建vue3项目 2)按部就班的安装element-plus vue-router axios npm i element-plus vue-route ...
「后端小伙伴来学前端了」关于Vue中的自定义事件，组件绑定自定义事件实现通信
傍晚的月亮前言原本这篇打算写Vue中的那个全局事件总线的原理,但是发现自己少写了这个自定义事件,不讲明白这个自定义事件的操作,不好写全局事件原理,于是就有了这篇文章拉. 一.v-on指令要讲自定 ...
vue导入音乐_【vlog制作】不经电脑，如何在VUE中导入自定义音乐
VUE按不同风格.节气/节日.每月精选和流行曲集设置了多个音乐库,用户在剪辑视频的时候可以在库中挑选BGM,省掉了找音乐的麻烦,对于新手用户尤为贴心.然而对于频繁使用VUE剪辑视频的用户来说,原配音乐 ...
在vue中element ui 结合frappe-gantt实现一个简单的甘特图功能
在vue中创建甘特图步骤请参考: https://editor.csdn.net/md/?articleId=130145782 2. 结合element ui 实现甘特图功能实现效果: 2.1 下 ...
Vue中实现自定义excel下载
最近在工作中遇到一个需求,就是需要在前端实现一个错误模板Excel的下载功能. 实现下载有两种方式,一种是后端生成一个excel,放在服务器指定目录下,然后前端直接去后端拿.第二种是后端传给前端一个j ...

vue中element自定义主题

仅替换主题色

实现自定义主题

vue中element自定义主题相关推荐

最新文章

热门文章