一背景

同一个项目中不同业务线模块的主题色不同，在切换业务模块的时候就需要改变主题色。

二实现

2.1 定义变量

在业务线模块加载的入口处定义css变量。

<style>
.body-box {
  --themeColor: #660066;
  --themeHeadColor: #1a1818;
}
</style>
<template>
    <div class="body-box" ref="mytheme">
	<router-view/>
    </div>
</template>
<script>
export default {
  data () {
    return {
      // 业务线主题配置
      theme: this.$const.bizLineTheme.blog
    }
  },
  mounted () {
    // 动态更新css属性值
    this.$refs.mytheme.style.setProperty('--themeHeadColor', this.theme.headColor)
    this.$refs.mytheme.style.setProperty('--themeColor', this.theme.color)
  }
}
</script>

2.2 使用主题样式

在业务线模块具体页面内获取上面定义的变量并使用

<style scoped>
.theme-head-color {
  background: var(--themeHeadColor) !important;
}
.theme-color {
  color: var(--themeColor) !important;
}
</style>
<template>
    <div class="layout">
	<header class="theme-head-color">
	我是 header
	</header>
	<section class="theme-color">
	我是 section
	</section>
    </div>
</template>

vue中css获取js值

vue中css获取js值

关于作者 📝

目录

评论