【需求描述】
主题颜色存在$store中,动态使得部分文字跟随主题颜色
【实现效果】
(主题颜色为蓝色,文字颜色跟随主题)
(主题颜色为紫色,文字颜色跟随主题)
【实现方式】
1、从项目中取出获得到的主题颜色。
2、与需要对应颜色的文字的标签style绑定使用。
【代码】
<template>
<div>
<a-tag :color="tagColor" v-for="(r,index) in roles" :key="index">{{ r }}</a-tag>
</div>
</template>
<script>
export default {
name: 'Logout',
computed: {
tagColor () {
return this.$store.getters.color
}
},
data () {
return {
roles: ['系统管理员','项目管理员']
}
},
methods: {
},
mounted () {
}
}
</script>
【color必须写在style中的做法】
<div class="model" :style="{'background-color': tagColor}">