以颜色为例子
定义颜色变量
import { reactive } from 'vue';// 可变的主题颜色let chooseColor = reactive({'--color': '#be2a27'})
CSS中使用var()函数引用颜色变量(这里是用elementPlus为例,也可以改)
:deep(.is-active) {color: var(--color);border-bottom: 2px solid var(--color);}
在html标签中绑定动态style
<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="goTab" :style="chooseColor"><el-tab-pane label="首页" name="home"></el-tab-pane><el-tab-pane label="产品" name="product"></el-tab-pane><el-tab-pane label="云易购" name="cloudShop"></el-tab-pane></el-tabs>
JS判断切换的tab,来改变颜色变量的颜色
// 切换 tab 跳转页面, 变换颜色const goTab = (tab, e) => {if (tab.paneName == '首页') {chooseColor['--color'] = '#d97817'} else {chooseColor['--color'] = '#be2a27'}}
