element-ui 自定义主题(修改默认颜色、颜色选择器切换)
程序员文章站
2022-06-26 18:06:47
修改element-ui默认颜色此方法需使用scss。项目中使用scss的方法不再赘述① 新建 scss 文件 element-variables.scss② scss 文件中写入/*主题色变量--即需要指定的主题颜色*/$--color-primary: #00a09f;/*font/icon路径--必写*/$--font-path: "~element-ui/lib/theme-chalk/fonts";@import "~element-ui/packages/theme-c...
一、修改element-ui默认颜色
此方法需使用scss。项目中使用scss的方法不再赘述
① 新建 scss 文件 element-variables.scss
② scss 文件中写入
/*主题色变量--即需要指定的主题颜色*/
$--color-primary: #00a09f;
/*font/icon路径--必写*/
$--font-path: "~element-ui/lib/theme-chalk/fonts";
@import "~element-ui/packages/theme-chalk/src/index";
③ main.js 中引入element-variables.scss
注意:如果此时项目报错:module was not found。将webpack.base.conf.js文件中scss的配置项删除
二、颜色选择器切换主题色
组件使用
<template>
<div class="theme">
<themeCom :color="color" @color-update="colorChange" />
<!-- 部分用来测试主题色的组件 -->
<div>
<el-checkbox :value="true">备选项</el-checkbox>
<el-input value placeholder="请输入内容"></el-input>
<el-slider :value="30"></el-slider>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
</div>
</div>
</template>
<script>
import themeCom from "./themeCom";
export default {
data() {
return {
color: "#f00", //建议存vuex
};
},
methods: {
colorChange(color) {
this.color = color;
},
},
components: { themeCom },
};
</script>
themeCom组件
<template>
<el-color-picker v-model="theme" />
</template>
<script>
const version = require("element-ui/package.json").version;
const ORIGINAL_THEME = "#409EFF";
export default {
props: {
color: String,
},
data() {
return {
chalk: "",
theme: "",
s: "",
};
},
computed: {
defaultTheme() {
return this.color;
},
},
watch: {
defaultTheme: {
handler: function (val, oldVal) {
this.theme = val;
},
immediate: true,
},
async theme(val) {
const oldVal = this.chalk ? this.theme : ORIGINAL_THEME;
if (typeof val !== "string") return;
const themeCluster = this.getThemeCluster(val.replace("#", ""));
const originalCluster = this.getThemeCluster(oldVal.replace("#", ""));
if (!this.chalk) {
await this.getCSSString();
}
this.getHandler(themeCluster);
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
);
});
this.$emit("color-update", val);
},
},
methods: {
// 修改element-ui主题样式表颜色
updateStyle(style, oldCluster, newCluster) {
let newStyle = style;
oldCluster.forEach((color, index) => {
newStyle = newStyle.replace(new RegExp(color, "ig"), newCluster[index]);
});
return newStyle;
},
// 生成新的样式表
getHandler(themeCluster) {
const originalCluster = this.getThemeCluster(
ORIGINAL_THEME.replace("#", "")
);
const newStyle = this.updateStyle(
this.chalk,
originalCluster,
themeCluster
);
let styleTag = document.getElementById("chalk-style");
if (!styleTag) {
styleTag = document.createElement("style");
styleTag.setAttribute("id", "chalk-style");
document.head.appendChild(styleTag);
}
styleTag.innerText = newStyle;
},
// 获取element-ui主题样式
getCSSString() {
const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`;
return new Promise((resolve) => {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
this.chalk = 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) {
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;
},
},
};
</script>
本文地址:https://blog.csdn.net/weixin_46527264/article/details/111871755