vue項(xiàng)目中vant tab改變標(biāo)簽顏色方式
vant tab改變標(biāo)簽顏色
找了幾種方法，只有下面這個(gè)方法是生效的：
<van-tabs v-model="active" sticky title-active-color="#144a9e" // 選中的標(biāo)簽文字顏色 color="#144a9e" // 下面那個(gè)下劃線顏色 @click="tabClick">
vant標(biāo)簽欄樣式改變
問題描述
在使用vant的Tab標(biāo)簽制作導(dǎo)航欄時(shí)，Tab樣式書寫方式同css有些許不同，并且一些樣式變量是已經(jīng)自定義的。那么如何改變樣式呢？為此總結(jié)了一部分較為常用的樣式的代碼。
算法描述
在對(duì)Tab標(biāo)簽的樣式進(jìn)行改變時(shí)，不僅要寫類標(biāo)簽名（class），還要寫上vant-tab的所需要部分的名?；蛘吣承┳远x樣式可通過vant教程里的主題定制教程進(jìn)行樣式的改變。本章節(jié)采用前一方式改變樣式。例子如下：
1）默認(rèn)模式（line樣式）
代碼清單 1
<van-tabs class="menu-tabs" v-model="activeName" @click="tagClick" > ? ? ? ? ? ?<van-tab title="導(dǎo)覽" name="guide" ></van-tab> ? ? ? ? ? ?<van-tab title="出入口" name="entranceandexit"></van-tab> ? ? ? ? ? ?<van-tab title="教學(xué)樓" name="academicBuilding"></van-tab> ? ? ? ? ?</van-tabs>
效果如下：
默認(rèn)的樣式：
2）若要在點(diǎn)擊標(biāo)簽時(shí)改變標(biāo)簽的樣式需要在類標(biāo)簽名后添上 .van-tab--active。
代碼清單 2
<style >
/* 標(biāo)簽欄樣式 */
.menu-tabs .van-tab--active{
?color: #FFFFFF; /* 字體顏色 */
?background-color: #FF8917;/* 標(biāo)簽背景顏色 */
?border-radius: 40px;/* 圓角標(biāo)簽背景 */
}
</style >還可通過 width，height改變背景的寬和高。
效果如下：
3）若要改變標(biāo)簽底部線條的樣式需要在類標(biāo)簽名后添上 .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="導(dǎo)覽" name="guide" ></van-tab> ? ? ? ? ? ?<van-tab title="出入口" name="entranceandexit"></van-tab> ? ? ? ? ? ?<van-tab title="教學(xué)樓" name="academicBuilding"></van-tab> </van-tabs>
效果如下：
本篇文章主要講的是vant的Tab標(biāo)簽樣式的改變。在遇到不會(huì)可以運(yùn)行到瀏覽器中使用檢查工具進(jìn)行調(diào)試，再加上通過教程學(xué)習(xí)進(jìn)行問題的解決。希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中的transition封裝組件的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue中的transition封裝組件的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue項(xiàng)目中路由懶加載的三種方式(簡(jiǎn)潔易懂)
本文主要介紹了vue項(xiàng)目中路由懶加載的三種方式,主要包括vue異步組件,組件懶加載,webpack的require.ensure(),具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
這篇文章主要給大家介紹了關(guān)于vue的ssr服務(wù)端渲染的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
vue.js實(shí)現(xiàn)用戶評(píng)論、登錄、注冊(cè)、及修改信息功能
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)用戶評(píng)論、登錄、注冊(cè)、及修改信息功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
vue之“} expected“和“at-rule or selector ex
這篇文章主要介紹了vue之“} expected“和“at-rule or selector expected“報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
詳解vue.js 開發(fā)環(huán)境搭建最簡(jiǎn)單攻略
本篇文章主要介紹了vue.js 開發(fā)環(huán)境搭建最簡(jiǎn)單攻略，這里整理了詳細(xì)的步驟，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
vue項(xiàng)目實(shí)現(xiàn)登陸注冊(cè)效果
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)登陸注冊(cè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue中的router-view父子組件傳參方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
詳解如何解決Vue和vue-template-compiler版本之間的問題
這篇文章主要介紹了詳解如何解決Vue和vue-template-compiler版本之間的問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-09-09
flutter使用tauri實(shí)現(xiàn)一個(gè)一鍵視頻轉(zhuǎn)4K軟件
這篇文章主要為大家介紹了flutter使用tauri實(shí)現(xiàn)一個(gè)一鍵視頻轉(zhuǎn)4K軟件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09