前几天想实现自己系统的主题色彩,自己已经有了思路,但还是想去网上看看别人的思路,但还是感觉自己的思路更清晰,
说一下我的思路
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>
vuex设置---------------------------------------------------
const state = {
theme:'#394657'
}
export default state;
二、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>
三、设置主题色,也就是设置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
}
大体思想就是主题色 的值 取决于vuex里的值,所做的操作都维护vuex里的值,加油
1b3l哦===