element切换主题颜色_element color

前几天想实现自己系统的主题色彩，自己已经有了思路，但还是想去网上看看别人的思路，但还是感觉自己的思路更清晰，
说一下我的思路
1.新建个颜色选择器的组件，主题色的值再vuex里选择。
2.再主页，注册，引入组件，放在弹窗里。
3.父子组件传值。
4.再公用vuex里设置主题颜色。
一、新建组件colorpicker.vue

<template>
	<div>
		<el-color-picker v-model="color" @change="changeColor"></el-color-picker>
	</div>
</template>

<script>
	export default({
		name:'colorpicker',
		data(){
			return{
				color: '#394657'
			}
		},
		methods:{
			changeColor(){
				console.log(this.color);
				this.$emit("choseColor",this.color);
			}
		}
	})
</script>

<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

vuex设置---------------------------------------------------

const state = {
	theme:'#394657'
}
export default state;
1
2
3
4

二、home页面引入组件(被弹窗包含,注册和引入暂不贴图了)

<div class="colorDiv">
		<el-dialog
		  custom-class="dialogdiv"
		  title="切换主题颜色"
		  :visible.sync="isshow"
		   width="15%"
		  >
		  <div>
		  	 <colorpicker @choseColor="confirmColor"></colorpicker>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="isshow = false">取 消</el-button>
		    <el-button type="primary" @click="editTheme">确 定</el-button>
		  </span>
		</el-dialog>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

三、设置主题色，也就是设置vuex的主题（home页面）

		data() {
			return {
				currentTheme:'',
				isshow:false
			}
		},
		computed: {
			...mapState({
				theme:'theme',
			})
		},
		methods: {
		//颜色弹窗显示隐藏
			swtichColor(){
				this.isshow=true;
			},
			//监听子页面选择的颜色值
			confirmColor(e){
				this.currentTheme=e;
			},
			//设置vuex里的主题色字段，并关闭弹窗
			editTheme(){
				this.switchTheme(this.currentTheme);
				this.isshow=false;
			},
			
		
			...mapMutations({
				switchTheme:'switchTheme'
			})
		},
		
		components: {
			colorpicker
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

大体思想就是主题色 的值 取决于vuex里的值，所做的操作都维护vuex里的值，加油
1b3l哦===