Vue3 实现JS动态改变CSS样式

以颜色为例子

定义颜色变量

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'}
}