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有些许不同，并且一些样式变量是已经自定义的。那么如何改变样式呢？为此总结了一部分较为常用的样式的代码。
算法描述
在对Tab标签的样式进行改变时，不仅要写类标签名（class），还要写上vant-tab的所需要部分的名。或者某些自定义样式可通过vant教程里的主题定制教程进行样式的改变。本章节采用前一方式改变样式。例子如下：
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>
效果如下：
本篇文章主要讲的是vant的Tab标签样式的改变。在遇到不会可以运行到浏览器中使用检查工具进行调试，再加上通过教程学习进行问题的解决。希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue中的transition封装组件的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
本文主要介绍了vue项目中路由懒加载的三种方式,主要包括vue异步组件,组件懒加载,webpack的require.ensure(),具有一定的参考价值,感兴趣的可以了解一下2024-01-01
这篇文章主要给大家介绍了关于vue的ssr服务端渲染的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要为大家详细介绍了vue.js实现用户评论、登录、注册、及修改信息功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
vue之“} expected“和“at-rule or selector ex
这篇文章主要介绍了vue之“} expected“和“at-rule or selector expected“报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
本篇文章主要介绍了vue.js 开发环境搭建最简单攻略，这里整理了详细的步骤，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要为大家详细介绍了vue项目实现登陆注册效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了vue中的router-view父子组件传参方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
详解如何解决Vue和vue-template-compiler版本之间的问题
这篇文章主要介绍了详解如何解决Vue和vue-template-compiler版本之间的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家介绍了flutter使用tauri实现一个一键视频转4K软件详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最新评论