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

JS判断切换的tab, 来改变颜色变量的颜色

// 切换 tab 跳转页面, 变换颜色
const goTab = (tab, e)  => {
    if (tab.paneName == '首页') {
        chooseColor['--color'] = '#d97817'
    } else {
        chooseColor['--color'] = '#be2a27'
    }
}