Vue Amazing UI

Appearance

标签页 Tabs ​


选项卡切换组件

何时使用 ​

  • 提供平级的区域将大块内容进行收纳和展现，保持界面整洁

基本使用 ​

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Content of Tab Pane 1
Show Code
vue
<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>
<template>
  <Tabs
    :tab-pages="tabPages"
    v-model:active-key="activeKey" />
</template>

卡片式标签页 ​

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Content of Tab Pane 1
Show Code
vue
<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>
<template>
  <Tabs
    type="card"
    :tab-pages="tabPages"
    v-model:active-key="activeKey" />
</template>

禁用某一项 ​

禁用 key: 3 标签页


Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Content of Tab Pane 1

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Content of Tab Pane 1
Show Code
vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const tabPagesDisabled = 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',
    disabled: true,
    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>
<template>
  <Tabs
    :tab-pages="tabPagesDisabled"
    v-model:active-key="activeKey" />
  <br/>
  <Tabs
    type="card"
    :tab-pages="tabPagesDisabled"
    v-model:active-key="activeKey" />
</template>

居中展示 ​

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Content of Tab Pane 1

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Content of Tab Pane 1
Show Code
vue
<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>
<template>
  <Tabs
    centered
    :tab-pages="tabPages"
    v-model:active-key="activeKey" />
  <br/>
  <Tabs
    centered
    type="card"
    :tab-pages="tabPages"
    v-model:active-key="activeKey" />
</template>

左右滑动，容纳更多标签 ​

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Content of Tab Pane 1

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Content of Tab Pane 1
Show Code
vue
<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>
<template>
  <Tabs
    style="width: 320px;"
    :tab-pages="tabPages"
    v-model:active-key="activeKey" />
  <br/>
  <Tabs
    style="width: 320px;"
    type="card"
    :tab-pages="tabPages"
    v-model:active-key="activeKey" />
</template>

三种尺寸 ​

Small
Middle
Large

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Content of Tab Pane 1

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Content of Tab Pane 1
Show Code
vue
<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)
})
const options = ref([
        {
          label: 'Small',
          value: 'small'
        },
        {
          label: 'Middle',
          value: 'middle'
        },
        {
          label: 'Large',
          value: 'large'
        }
      ])
const size = ref('middle')
</script>
<template>
  <Radio :options="options" v-model:value="size" />
  <br/>
  <Tabs
    :size="size"
    :tab-pages="tabPages"
    v-model:active-key="activeKey" />
  <br/>
  <Tabs
    type="card"
    :size="size"
    :tab-pages="tabPages"
    v-model:active-key="activeKey" />
</template>

自定义内容 ​

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6

key: 1 的 slot 内容

Show Code
vue
<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>
<template>
  <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>
  </Tabs>
</template>

APIs ​

参数说明类型默认值必传
tabPages标签页数组Tab[][]true
centered标签是否居中展示booleanfalsefalse
size标签页大小'small' | 'middle' | 'large''middle'false
type标签页的样式'line' | 'card''line'false
guttertabs 之前的间隙大小，单位pxnumberundefinedfalse
activeKey
v-model
当前激活 tab 面板的 keystring | number''false

Tab Type ​

名称说明类型必传
key对应 activeKeystring | numbertrue
tab标签页显示文字stringtrue
content标签页内容string | slotfalse
disabled禁用对应标签页booleanfalse

Events ​

事件名称说明参数
change切换面板的回调(key: string | number) => void

Released under the MIT License.

Copyright © 2023-present The Muse Catcher