vue項目中vant tab改變標簽顏色方式

更新時間：2022年04月26日 09:22:22 作者：??馬溫柔

這篇文章主要介紹了vue項目中vant tab改變標簽顏色方式，具有很好的參考價值，希望對大家有所幫助。

vant tab改變標簽顏色

找了幾種方法，只有下面這個方法是生效的：

<van-tabs
v-model="active"
sticky
title-active-color="#144a9e" // 選中的標簽文字顏色
color="#144a9e" // 下面那個下劃線顏色
@click="tabClick">

vant標簽欄樣式改變

問題描述

在使用vant的Tab標簽制作導航欄時，Tab樣式書寫方式同css有些許不同，并且一些樣式變量是已經(jīng)自定義的。那么如何改變樣式呢？為此總結了一部分較為常用的樣式的代碼。

算法描述

在對Tab標簽的樣式進行改變時，不僅要寫類標簽名（class），還要寫上vant-tab的所需要部分的名?；蛘吣承┳远x樣式可通過vant教程里的主題定制教程進行樣式的改變。本章節(jié)采用前一方式改變樣式。例子如下：

1）默認模式（line樣式）

代碼清單 1

<van-tabs class="menu-tabs" v-model="activeName" @click="tagClick" >
? ? ? ? ? ?<van-tab title="導覽" name="guide" ></van-tab>
? ? ? ? ? ?<van-tab title="出入口" name="entranceandexit"></van-tab>
? ? ? ? ? ?<van-tab title="教學樓" name="academicBuilding"></van-tab>
? ? ? ? ?</van-tabs>

效果如下：

默認的樣式：

2）若要在點擊標簽時改變標簽的樣式需要在類標簽名后添上 .van-tab--active。

代碼清單 2

<style >
/* 標簽欄樣式 */
.menu-tabs .van-tab--active{
?color: #FFFFFF; /* 字體顏色 */
?background-color: #FF8917;/* 標簽背景顏色 */
?border-radius: 40px;/* 圓角標簽背景 */
}
</style >

還可通過 width，height改變背景的寬和高。

效果如下：

3）若要改變標簽底部線條的樣式需要在類標簽名后添上 .van-tabs__line。

代碼清單 3

<style >
.menu-tabs .van-tabs__line{
?background-color: #ff55ff;/* 線條顏色 */
?width: 40px;/*寬度 */
?height: 10px;/* 高度 */
border-radius: 40px;/* 圓角 */
}
</style >

效果如下：

4）card樣式，在van-tabs使用type。

代碼清單 4

<van-tabs class="menu-tabs" type="card" v-model="activeName" @click="tagClick" >
? ? ? ? ? ?<van-tab title="導覽" name="guide" ></van-tab>
? ? ? ? ? ?<van-tab title="出入口" name="entranceandexit"></van-tab>
? ? ? ? ? ?<van-tab title="教學樓" name="academicBuilding"></van-tab>
</van-tabs>

效果如下：