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)簽欄樣式改變
問(wèn)題描述
在使用vant的Tab標(biāo)簽制作導(dǎo)航欄時(shí)，Tab樣式書(shū)寫(xiě)方式同css有些許不同，并且一些樣式變量是已經(jīng)自定義的。那么如何改變樣式呢？為此總結(jié)了一部分較為常用的樣式的代碼。
算法描述
在對(duì)Tab標(biāo)簽的樣式進(jìn)行改變時(shí)，不僅要寫(xiě)類(lèi)標(biāo)簽名（class），還要寫(xiě)上vant-tab的所需要部分的名?；蛘吣承┳远x樣式可通過(guò)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)簽的樣式需要在類(lèi)標(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 >還可通過(guò) width，height改變背景的寬和高。
效果如下：
3）若要改變標(biāo)簽底部線條的樣式需要在類(lèi)標(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)試，再加上通過(guò)教程學(xué)習(xí)進(jìn)行問(wèn)題的解決。希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
組件是vue.js最強(qiáng)大的功能之一,而組件實(shí)例的作用域是相互獨(dú)立的,這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互引用,這篇文章主要給大家介紹了關(guān)于Vue3的10種組件通信方式的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
這篇文章主要介紹了基于Vue3實(shí)現(xiàn)組件封裝的技巧,本文在Vue3的基礎(chǔ)上針對(duì)一些常見(jiàn)UI組件庫(kù)組件進(jìn)行二次封裝,旨在追求更好的個(gè)性化,更靈活的拓展,感興趣的小伙伴跟著小編一起來(lái)看看吧2024-09-09
vue+intro.js插件實(shí)現(xiàn)引導(dǎo)功能
使用 intro.js這個(gè)插件,來(lái)實(shí)現(xiàn)一個(gè)引導(dǎo)性的效果,經(jīng)常在一些新手引導(dǎo)頁(yè)遇到這樣的需求,下面通過(guò)本文給大家分享vue+intro.js插件實(shí)現(xiàn)引導(dǎo)功能,感興趣的朋友一起看看吧2024-06-06
在Web應(yīng)用程序中剪貼板(Clipboard)操作是非常常見(jiàn)的操作之一,這篇文章主要給大家介紹了關(guān)于vue中粘貼板clipboard使用方法的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
使用Vue 實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼功能
本文章主要來(lái)介紹一下第一個(gè)階段，也就是前端校驗(yàn)的驗(yàn)證碼的實(shí)現(xiàn)，下面來(lái)介紹一下拖動(dòng)驗(yàn)證碼的具體實(shí)現(xiàn)。這篇文章主要介紹了利用 Vue 實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼,需要的朋友可以參考下2019-06-06
在本文中，我們學(xué)習(xí)了如何使用 Intersection Observer API 和?defineAsyncComponent?函數(shù)在 Vue 組件可見(jiàn)時(shí)對(duì)其進(jìn)行懶加載，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友一起看看吧2023-09-09
一文帶你搞懂Vue中Provide/Inject的使用與高級(jí)應(yīng)用
這篇文章將詳細(xì)介紹如何在?Vue.js?中使用?provide?和?inject?模式,并探討其在實(shí)際應(yīng)用中的高級(jí)用法,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
這篇文章主要介紹了Vue中router-link常用屬性使用案例講解,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商品規(guī)格選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
今天小編就為大家分享一篇vue表單自定義校驗(yàn)規(guī)則介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08