Tab 标签页

介绍

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

基础用法

通过 v-model 绑定当前选中的标签的索引，默认激活第一项。

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

const active = ref(0);

名称匹配

通过 name 属性设置标签页的名称时，v-model 的值为绑定当前选中的标签名称。

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

const active = ref('1');

收缩布局

通过 shrink 属性设置标签页为收缩布局。

<vd-tabs v-model="active" shrink>
  <vd-tab title="标签1" name="1">标签内容1</vd-tab>
  <vd-tab title="标签2" name="2">标签内容2</vd-tab>
  <vd-tab title="标签3" name="3">标签内容3</vd-tab>
</vd-tabs>

const active = ref('1');

指示线条宽度

通过 line-width 属性设置指示线条的宽度，设置为 'auto' 时，根据选中项自动设置线条的宽度。

<vd-tabs v-model="active" :shrink="true" line-width="auto">
  <vd-tab title="标签1" name="1">标签内容1</vd-tab>
  <vd-tab title="标签2" name="2">标签内容2</vd-tab>
  <vd-tab title="标签3" name="3">标签内容3</vd-tab>
</vd-tabs>

const active = ref('1');

切换动画

通过 animated 属性开启/关闭标签页之间的切换动画。

<vd-tabs v-model="active" animated>
  <vd-tab title="标签1" name="1">标签内容1</vd-tab>
  <vd-tab title="标签2" name="2">标签内容2</vd-tab>
  <vd-tab title="标签3" name="3">标签内容3</vd-tab>
</vd-tabs>

const active = ref('1');

滑动切换

通过 swipeable 属性开启/关闭标签页之间的滑动切换。

<vd-tabs v-model="active" swipeable>
  <vd-tab title="标签1" name="1">标签内容1</vd-tab>
  <vd-tab title="标签2" name="2">标签内容2</vd-tab>
  <vd-tab title="标签3" name="3">标签内容3</vd-tab>
</vd-tabs>

const active = ref('1');

API

Tabs Props

参数	说明	类型	默认值
v-model	选中值	string | number	0
shrink	是否收缩布局	boolean	-
animated	是否开启标签内容切换动画	boolean	-
duration	动画时间，设置为 0 时禁用动画	string | number	500
line-width	指示线条宽度，设置 'auto' 时自动根据选项设置宽度	string | number	40
swipeable	是否开启标签页之间的滑动切换	boolean	-
before-swipe	左右滑动前回调，返回 false 阻止滑动	TabsBeforeSwipe	-
lazy-render	是否首次切换到标签时才触发内容渲染	boolean	true
update-on-view	当组件出现在视图时，是否自动触发更新事件	boolean	true

Tab Props

参数	说明	类型	默认值
title	标题	string	-
name	标签名称，作为匹配的标识符	string | number	-
disabled	是否禁用标签	boolean	-
lazy-render	是否首次切换到标签时才触发内容渲染	boolean	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Tabs Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
click-tab	点击标签项时触发	TabsOnClickTabEvent
change	标签切换时触发	TabsItem

Tab Events

事件名	说明	回调参数
click	点击时触发	MouseEvent

Tabs Slots

名称	说明
default	标签项内容
nav	标签导航内容

Tab Slots

名称	说明
default	自定义内容

Tabs Expose

方法名	说明	参数	返回值
update	手动触发标签线条、滚动位置计算	-	-