如果你在根组件下注入了store,那么就可以在  .vue文件中使用  $store.state.xxx

然后根据颜色颜色选择器，选择的颜色动态改变  $store.state.xxx ，以达到改变背景色跟字体颜色的目的。
<template>
	<div>
		<!-- leftbackground  跟  leftcolor是我自定义设置的 -->
		<div :style="{backgroundColor: $store.state.leftbackground,color:$store.state.leftcolor}" class='DivClass'>
			演示
		</div>
		<!-- element-ui 颜色选择器 -->
		<el-color-picker v-model="$store.state.leftbackground"></el-color-picker>
		<el-color-picker v-model="$store.state.leftcolor"></el-color-picker>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		created: function() {
			this.$store.state.leftbackground='#fff'  //设置默认背景颜色
			this.$store.state.leftcolor='#606266'//设置默认字体颜色
		}
	}
</script>
<style>
	.DivClass{
		height:200px;
		width:200px;
	}
</style>

原文演示及链接： https://codepen.io/richardtallent/pen/yvpERW/

 





 

<template>
    <div class="theme" :style="bgProps">
        <div class="btn">
            <input type="color" v-model="changeColor">
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            changeColor: '#00cc00'
        }
    },
    computed: {
        bgProps() {
           return {
               '--bg-color': this.changeColor
           }
        }
    },
}
</script>
<style lang="scss" scoped>
.theme{
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-color);
    .btn > input{
        width: 30px;
        height: 30px;
    }
}
</style>



 

如上图，如果是第一张图片，需要在左上角加上灰色背景，白色“封面”字样，背景色需要有透明度。

首先，需要知道rgba() 函数。

rgba() 函数使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。

RGBA 即红色、绿色、蓝色、透明度（英语：Red, Green, Blue、Alpha）。

红色（R）0 到 255 间的整数，代表颜色中的红色成分。。
	
绿色（G）0 到 255 间的整数，代表颜色中的绿色成分。
	
蓝色（B）0 到 255 间的整数，代表颜色中的蓝色成分。
	
透明度（A）取值 0~1 之间， 代表透明度。数值越小，透明度越高。
下面上vue代码：

 

首先设置父级元素位置position: relative;然后设置子元素位置position: absolute;通过设置left、right、top、bottom来调整位置，然后设置背景色background:rgba(34,34,34,0.5);



 

进入组件更改背景颜色 beforeCreate—创建之前调用
beforeCreate() {
        document.querySelector('body').setAttribute('style','background:#F4F5F4')
      },

退出组件还原背景颜色  beforeDestroy —实例销毁之前调用
beforeDestroy() {
        document.querySelector('body').setAttribute('style','background:#FFFFFF')
      },