v-tab

介绍

选项卡组件，用于在不同的内容区域之间进行切换。

预览

引入

方式请参考组件用法 。

代码演示

基础用法

通过 v-model:active 绑定当前激活标签对应的索引值，默认情况下启用第一个标签。

<v-tabs v-model:active="active">
  <v-tab title="标签 1">内容 1</v-tab>
  <v-tab title="标签 2">内容 2</v-tab>
  <v-tab title="标签 3">内容 3</v-tab>
  <v-tab title="标签 4">内容 4</v-tab>
</v-tabs>

import { ref } from 'vue';

export default {
  setup() {
    const active = ref(0);
    return { active };
  },
};

监听切换事件

设置 change 方法来监听切换导航项时的事件。

<v-tabs v-model:active="active" @change="onChange">
  <v-tab title="标签 1">内容 1</v-tab>
  <v-tab title="标签 2">内容 2</v-tab>
  <v-tab title="标签 3">内容 3</v-tab>
  <v-tab title="标签 4">内容 4</v-tab>
</v-tabs>

export default {
    setup() {
        const onChange = (index) => {
            console.log(`tab index ${index + 1}`)
        }
        return {
            onChange,
        };
    },
};

API

Tabs Props

参数	说明	类型	默认值
active	当前导航项的索引	number	0
config	支持全部v-group属性	object	-
duration	动画时间，单位秒，设置为 0 可以禁用动画	number	0
activeMode	tab 激活方式	'enter'/'none'	'none'
styleMix	active 和 focus是否共存	boolean	false
focused	焦点是否在Tab区域内（辅助styleMix）	boolean	false
L fill	背景颜色	String	-
L padding	内部padding	number	0
L cornerRadius	圆角	Number	0
L fillLinearGradientStartPoint	线性渐变起点	Object<{x:0,y:0}>	-
L fillLinearGradientEndPoint	线性渐变结束点	Object<{x:0,y:100}>	-
L fillLinearGradientColorStops	线性渐变颜色停止	Array<[0, '#FEF0D6', 1, '#FEE2C1']>	-

Tabs Events

事件名	说明	回调参数
change	切换导航项时触发	index: number
rendered	标签内容首次渲染时触发	index: number

Tab Props

参数	说明	类型	默认值
title	标题	string	''
badge	图标右上角徽标的内容	number	string
config	支持全部v-rect属性	object	--
L fill	默认字体颜色	string	#000000
L focusColor	落焦字体颜色	string	#000
L activeColor	激活字体颜色	string	#f00
L focusBackground	落焦背景颜色	string	''
L activeBackground	激活背景颜色	string	''
L focusStyle	落焦字体样式	normal bold italic	normal
L activeStyle	激活字体样式	normal bold italic	normal

Tab Solts

参数	说明
badge	徽标