Tabs 标签页

选项卡切换组件。

基础使用

使用 v-model 绑定当前显示的 tab。

控制台

active:tab2

查看代码

<template>
	<demo-container>
		<gov-tabs v-model="active">
			<gov-tab-pane name="tab1" label="枫桥夜泊">
				月落乌啼霜满天，江枫渔火对愁眠。<br />
				姑苏城外寒山寺，夜半钟声到客船。
			</gov-tab-pane>
			<gov-tab-pane name="tab2" label="凉州词" disabled>
				黄河远上白云间，一片孤城万仞山。<br />羌笛何须怨杨柳，春风不度玉门关。
			</gov-tab-pane>
			<gov-tab-pane name="tab3" label="早发白帝城">
				朝辞白帝彩云间，千里江陵一日还。<br />两岸猿声啼不住，轻舟已过万重山。
			</gov-tab-pane>
		</gov-tabs>
		<template #console>active:{{ active }}</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const active = ref("tab2");
</script>

自定义导航

可以在 name='nva' 的插槽里定义导航样式。

控制台

active:tab1

查看代码

<template>
	<demo-container>
		<gov-tabs v-model="active">
			<template #nav="{ tab, index }">
				<i>{{ index + 1 }}、</i> {{ tab.label }}
			</template>
			<gov-tab-pane name="tab1" label="枫桥夜泊">
				月落乌啼霜满天，江枫渔火对愁眠。<br />
				姑苏城外寒山寺，夜半钟声到客船。
			</gov-tab-pane>
			<gov-tab-pane name="tab2" label="凉州词">
				黄河远上白云间，一片孤城万仞山。<br />羌笛何须怨杨柳，春风不度玉门关。
			</gov-tab-pane>
			<gov-tab-pane name="tab3" label="早发白帝城">
				朝辞白帝彩云间，千里江陵一日还。<br />两岸猿声啼不住，轻舟已过万重山。
			</gov-tab-pane>
		</gov-tabs>
		<template #console>active:{{ active }}</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const active = ref("tab1");
</script>

Tabs Attributes

属性名	说明	类型	可选值	默认值
modelValue	当前激活的标签名称	String, Number	—	—
border	是否显示边框	Boolean	true, false	true
round	是否显示圆角边框	Boolean	true, false	true

Tabs Events

事件名	说明	回调参数
update:modelValue	当前激活的标签变化时触发	当前激活的标签名称
switch	切换标签时触发	当前激活的标签名称

Tabs Slots

插槽名	说明	作用域插槽	内容
nav	自定义导航项内容，提供了 tab（当前标签项）, index（索引）, isActive（是否激活）作为作用域属性	是	—
default	标签内容区域，用于插入各个标签页的内容	否	—

TabsPane Attributes

属性名	说明	类型	可选值	默认值
name	标签页的唯一标识符	String	—	—
label	标签页的显示名称	String	—	—
disabled	是否禁用该标签页	Boolean	true, false	false

TabsPane Slots

插槽名	说明	作用域插槽	内容
default	标签页的内容区域	否	—