动态设置van-tabs-active背景颜色

当项目中颜色需要动态设置时（颜色从后端获取），使用的时vant-tabs组件

html部分

<!-- 你的 Vue 组件 -->  
<template>  
  <van-tabs v-model="activeTab">  
    <van-tab title="标签 1" name="1">内容 1</van-tab>  
    <van-tab title="标签 2" name="2">内容 2</van-tab>  
    <!-- ... -->  
  </van-tabs>  
</template>  
  

css部分

:root {
  --active-background-color: #9a9a9a; /* 设置默认背景色 */
}
.van-tab.van-tab--active {
  background-color: var(--active-background-color);
}

js部分

 data() {
    return {
      active: 0,
      style:{
        bgColor:'#f9c200'
      },
    }
  },
 created() {
    this.fetchTabColor(); // 假设这是你从接口获取颜色的方法
  }，
 methods: {
    fetchTabColor() {
      // 模拟从接口获取颜色
      setTimeout(() => {
        //这里也接口数据，获得从后端获取的颜色
        getColor(this.$route.query.id).then(res => {
            this.style.bgColor = res
        })


        const newColor = this.style.bgColor; // 假设这是从接口返回的颜色
        // this.style.bgColor = newColor; // 更新 Vue 组件的数据
        document.documentElement.style.setProperty('--active-background-color', newColor); // 更新 CSS 变量
      }, 1000);
    },
  }