Vue 项目 页面主题颜色,字体颜色由后台返回数据控制
**需求:**同一个页面,可以根据后台返回的颜色值,改变页面的色调方式无需多言直接上代码<template><div class="theme" :style="colorProps"><div class="btn"><div class="class1">我的字体颜色是红色的...
·
**
需求:
**
同一个页面,可以根据后台返回的颜色值,改变页面的色调
方式
无需多言 直接上代码
<template>
<div class="theme" :style="colorProps">
<div class="btn">
<div class="class1">我的字体颜色是红色的</div>
</div>
<div class="btn">
<div class="class2">我的背景颜色是红色的</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
changeColor: '#ff0000' // 后台返回的色值
}
},
computed: {
colorProps() {
return {
'moveColor': this.changeColor
}
}
}
}
</script>
<style lang="less" scoped>
.theme{
width: 100%;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
.class1 {
color: var(moveColor);
}
.class2 {
background-color: var(moveColor);
}
}
</style>
更多推荐
已为社区贡献14条内容
所有评论(0)