标签页 Tabs
选项卡切换组件
基本使用
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Content of Tab Pane 1
Show Code
vue
<template>
<n-tabs :tab-pages="tabPages" v-model:active-key="activeKey" />
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const tabPages = ref([
{
key: '1',
tab: 'Tab 1',
content: 'Content of Tab Pane 1',
},
{
key: '2',
tab: 'Tab 2',
content: 'Content of Tab Pane 2',
},
{
key: '3',
tab: 'Tab 3',
content: 'Content of Tab Pane 3',
},
{
key: '4',
tab: 'Tab 4',
content: 'Content of Tab Pane 4',
},
{
key: '5',
tab: 'Tab 5',
content: 'Content of Tab Pane 5',
},
{
key: '6',
tab: 'Tab 6',
content: 'Content of Tab Pane 6',
},
])
const activeKey = ref('1')
watchEffect(() => {
// 回调立即执行一次，同时会自动跟踪回调中所依赖的所有响应式依赖
console.log('activeKey:', activeKey.value)
})
</script>禁用某一项
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Content of Tab Pane 1
Show Code
vue
<template>
<n-tabs :tab-pages="tabPages" v-model:active-key="activeKey" />
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const tabPages = ref([
{
key: '1',
tab: 'Tab 1',
content: 'Content of Tab Pane 1',
},
{
key: '2',
tab: 'Tab 2',
content: 'Content of Tab Pane 2',
disabled: true,
},
{
key: '3',
tab: 'Tab 3',
content: 'Content of Tab Pane 3',
},
{
key: '4',
tab: 'Tab 4',
content: 'Content of Tab Pane 4',
},
{
key: '5',
tab: 'Tab 5',
content: 'Content of Tab Pane 5',
},
{
key: '6',
tab: 'Tab 6',
content: 'Content of Tab Pane 6',
},
])
const activeKey = ref('1')
watchEffect(() => {
// 回调立即执行一次，同时会自动跟踪回调中所依赖的所有响应式依赖
console.log('activeKey:', activeKey.value)
})
</script>大号标签页
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Content of Tab Pane 1
Show Code
vue
<template>
<n-tabs size="large" :tab-pages="tabPages" v-model:active-key="activeKey" />
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const tabPages = ref([
{
key: '1',
tab: 'Tab 1',
content: 'Content of Tab Pane 1',
},
{
key: '2',
tab: 'Tab 2',
content: 'Content of Tab Pane 2',
},
{
key: '3',
tab: 'Tab 3',
content: 'Content of Tab Pane 3',
},
{
key: '4',
tab: 'Tab 4',
content: 'Content of Tab Pane 4',
},
{
key: '5',
tab: 'Tab 5',
content: 'Content of Tab Pane 5',
},
{
key: '6',
tab: 'Tab 6',
content: 'Content of Tab Pane 6',
},
])
const activeKey = ref('1')
watchEffect(() => {
// 回调立即执行一次，同时会自动跟踪回调中所依赖的所有响应式依赖
console.log('activeKey:', activeKey.value)
})
</script>自定义内容
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
key: 1 的 slot 内容
Show Code
vue
<template>
<n-tabs :tab-pages="tabPages" v-model:active-key="activeKey">
<template #1>
<p>key: 1 的 slot 内容</p>
</template>
<template #2>
<p>key: 2 的 slot 内容</p>
</template>
<template #3>
<p>key: 3 的 slot 内容</p>
</template>
</n-tabs>
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const tabPages = ref([
{
key: '1',
tab: 'Tab 1',
content: 'Content of Tab Pane 1',
},
{
key: '2',
tab: 'Tab 2',
content: 'Content of Tab Pane 2',
},
{
key: '3',
tab: 'Tab 3',
content: 'Content of Tab Pane 3',
},
{
key: '4',
tab: 'Tab 4',
content: 'Content of Tab Pane 4',
},
{
key: '5',
tab: 'Tab 5',
content: 'Content of Tab Pane 5',
},
{
key: '6',
tab: 'Tab 6',
content: 'Content of Tab Pane 6',
},
])
const activeKey = ref('1')
watchEffect(() => {
// 回调立即执行一次，同时会自动跟踪回调中所依赖的所有响应式依赖
console.log('activeKey:', activeKey.value)
})
</script>API
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| tabPages | 标签页数组 | Tab[] | [] |
| centered | 标签是否居中展示 | boolean | false |
| size | 标签页大小 | 'small' | 'large' | 'small' |
| activeKey(v-model) | 当前激活 tab 面板的 key | string | number | '' |
Tab Type
| 名称 | 说明 | 类型 |
|---|---|---|
| key | 对应 activeKey | string | number |
| tab | 标签页显示文字 | string |
| content | 标签页内容 | string | slot |
| disabled | 禁用对应标签页 | boolean |
Events
| 事件名称 | 说明 | 参数 |
|---|---|---|
| change | 切换面板的回调 | (key: string | number) => void |