修改ElementUi主题色最简单的方式

不需要配置css文件, less变量等操作, 一个函数即可实现

安装

npm i update-element-ui-theme

调用

<template>
	<el-color-picker v-model="color" @change="onColorPickerChange" />
</template>
// 引入
<script>
	import updateElementUiTheme from "update-element-ui-theme";
	export default {
		data: () => ({ color:'red' }),
		methods: {
			onColorPickerChange(color) {
				// 调用
				updateElementUiTheme({
				  theme: color, // 要修改的主题色
				  // 如果要同步修改一些非Elementui组件的颜色
				  // 可以传入一个css变量名称, 在css中使用即可
				  themeName: "--my-theme",
				});
			}
		}
	}
</script>

1. 仓库地址
2. Live Demo
3. Npm 地址