动态修改van-tab选中的标签大小
时间: 2023-11-05 10:28:20 浏览: 140
可以通过覆盖 vant 组件库中的样式,来动态修改选中的标签大小。
首先,需要在选中的标签上添加一个自定义的 class,例如 `my-active-tab`,然后在全局样式中覆盖该 class 的样式,例如:
```css
.my-active-tab {
font-size: 20px;
}
```
接下来,可以在 `change` 事件中动态添加/移除 `my-active-tab` class,来实现选中标签大小的变化。例如:
```html
<van-tabs v-model="activeTab" @change="handleTabChange">
<van-tab v-for="(tab, index) in tabs" :key="index">
{{ tab }}
</van-tab>
</van-tabs>
```
```js
export default {
data() {
return {
activeTab: 0,
tabs: ['标签1', '标签2', '标签3']
};
},
methods: {
handleTabChange(index) {
// 先移除之前选中标签的样式
const prevTab = this.$el.querySelector('.my-active-tab');
if (prevTab) {
prevTab.classList.remove('my-active-tab');
}
// 添加当前选中标签的样式
const currentTab = this.$el.querySelectorAll('.van-tab')[index];
if (currentTab) {
currentTab.classList.add('my-active-tab');
}
}
}
};
```
在 `handleTabChange` 方法中,先移除之前选中标签的样式(如果有的话),然后添加当前选中标签的样式,即可实现选中标签大小的动态变化。
阅读全文