vant中的title-active-color与title-inactive-color不生效问题

布满荆棘的人生 2023-02-16 06:19 11阅读 0赞

## 今天刚学vant 然后就遇到了 title切换加入后不生效了 太难了 ##

### 问题代码 ###

<van-tabs 
     	v-model="active" 
    	scrollspy sticky 
    	background="#f8f8f8" 
    	color="#bc7e3c" 
    	title-active-color="#bc7e3c"
    	title-inactive-color="#bc7e3c">
                <van-tab title="案例">下边内容</van-tab>
                <van-tab title="案例">下边内容</van-tab>
                <van-tab title="案例">下边内容</van-tab>
     </van-tabs>

export default{ 
        data(){ 
            return{ 
                active:0
            }
        }
    }

`这个时候 我就出现了 title-active-color与title-inactive-color 不生效问题 具体原因没找到 但是找到了 解决方法 具体方法如下:`

<van-tabs 
     	v-model="active" 
    	scrollspy sticky 
    	background="#f8f8f8" 
    	color="#bc7e3c" 
    	title-active-color="#bc7e3c"
    	title-inactive-color="#bc7e3c">
                <van-tab>
                	<template #title >
                            <span :style="active===0?'color:#bc7e3c':'color:#333'" >
                            案例1
                            </span>
                        </template>
                </van-tab>
                <van-tab>
                	<template #title >
                            <span :style="active===1?'color:#bc7e3c':'color:#333'" >
                            案例2
                            </span>
                        </template>
    			</van-tab>
                <van-tab>
                	<template #title >
                            <span :style="active===2?'color:#bc7e3c':'color:#333'" >
                            案例3
                            </span>
                        </template>
                </van-tab>
     </van-tabs>

`利用title插槽，用active的状态来更改title内容的样式，下面的线还是用官方文档的color来更改颜色。`