正文

vue项目中vant tab改变标签颜色

IP云
IP云V管理员/34 阅读
08/04
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.

<van-tabs
v-model="active"
sticky
title-active-color="#144a9e" // 选中的标签文字颜色
color="#144a9e" // 下面那个下划线颜色
@click="tabClick">

2. 改变van-tab边框颜色
在类名前加上深度操作符: /deep/

/deep/.channel-tabs {
.van-tab {
border-right: 1px solid #edeff3;
}
}

3. 改变van-tab 标签:宽高 文字颜色大小, 底部条:宽高 颜色 位置

.van-tabs__nav {
//父元素有底边15px,要么加上这15px,要么干掉它
padding-bottom: 0;
}
.van-tabs__line {
bottom: 8px;
width: 31px !important;
height: 6px;
background-color: #3296fa; }