JView UI

Appearance

Tabs 组件利用平级的结构，可以收纳诸多内容，用于实现类似于浏览器页签的功能。

Tabs 组件由两大部分组成，分别是包裹组件Tabs，以及面板组件TabPanel。

基本展示 ​

TabPanel 必须通过唯一的 tabKey 属性来标识。

Tabs 的 activeKey 则决定了哪个页签是激活状态。

Tab1
Tab2标题
Tab3标题很长

锄禾日当午，汗滴禾下土。
谁知盘中餐，粒粒皆辛苦。

展开查看代码
vue
<template>
    <j-tabs v-model:active-key="activeKey">
        <j-tab-panel title="Tab1" tab-key="1">
            <p>锄禾日当午，汗滴禾下土。<br />谁知盘中餐，粒粒皆辛苦。</p>
        </j-tab-panel>
        <j-tab-panel title="Tab2标题" tab-key="2">
            <p>两个黄鹂鸣翠柳，一行白鹭上青天。<br />窗含西岭千秋雪，门泊东吴万里船。</p>
        </j-tab-panel>
        <j-tab-panel title="Tab3标题很长" tab-key="3">
            <p>日照香炉生紫烟，遥看瀑布挂前川。<br />飞流直下三千尺，疑是银河落九天。</p>
        </j-tab-panel>
    </j-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeKey = ref('1')
</script>
<template>
    <j-tabs v-model:active-key="activeKey">
        <j-tab-panel title="Tab1" tab-key="1">
            <p>锄禾日当午，汗滴禾下土。<br />谁知盘中餐，粒粒皆辛苦。</p>
        </j-tab-panel>
        <j-tab-panel title="Tab2标题" tab-key="2">
            <p>两个黄鹂鸣翠柳，一行白鹭上青天。<br />窗含西岭千秋雪，门泊东吴万里船。</p>
        </j-tab-panel>
        <j-tab-panel title="Tab3标题很长" tab-key="3">
            <p>日照香炉生紫烟，遥看瀑布挂前川。<br />飞流直下三千尺，疑是银河落九天。</p>
        </j-tab-panel>
    </j-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeKey = ref('1')
</script>

标签居中 ​

通过 centered 属性设置居中。

居中：
Tab1
Tab2标题
Tab3标题很长

锄禾日当午，汗滴禾下土。
谁知盘中餐，粒粒皆辛苦。

展开查看代码
vue
<template>
    <j-space align="center">居中：<j-switch v-model:checked="centered" /></j-space>
    <j-tabs v-model:active-key="activeKey" :centered="centered">
        <j-tab-panel title="Tab1" tab-key="1">
            <p>锄禾日当午，汗滴禾下土。<br />谁知盘中餐，粒粒皆辛苦。</p>
        </j-tab-panel>
        <j-tab-panel title="Tab2标题" tab-key="2">
            <p>两个黄鹂鸣翠柳，一行白鹭上青天。<br />窗含西岭千秋雪，门泊东吴万里船。</p>
        </j-tab-panel>
        <j-tab-panel title="Tab3标题很长" tab-key="3">
            <p>日照香炉生紫烟，遥看瀑布挂前川。<br />飞流直下三千尺，疑是银河落九天。</p>
        </j-tab-panel>
    </j-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeKey = ref('1')

const centered = ref(false)
</script>
<template>
    <j-space align="center">居中：<j-switch v-model:checked="centered" /></j-space>
    <j-tabs v-model:active-key="activeKey" :centered="centered">
        <j-tab-panel title="Tab1" tab-key="1">
            <p>锄禾日当午，汗滴禾下土。<br />谁知盘中餐，粒粒皆辛苦。</p>
        </j-tab-panel>
        <j-tab-panel title="Tab2标题" tab-key="2">
            <p>两个黄鹂鸣翠柳，一行白鹭上青天。<br />窗含西岭千秋雪，门泊东吴万里船。</p>
        </j-tab-panel>
        <j-tab-panel title="Tab3标题很长" tab-key="3">
            <p>日照香炉生紫烟，遥看瀑布挂前川。<br />飞流直下三千尺，疑是银河落九天。</p>
        </j-tab-panel>
    </j-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeKey = ref('1')

const centered = ref(false)
</script>

切换动画 ​

通过 animated 属性开启切换动画，默认开启。

切换动画：
Tab1
Tab2标题
Tab3标题很长

锄禾日当午，汗滴禾下土。
谁知盘中餐，粒粒皆辛苦。

展开查看代码
vue
<template>
    <j-space align="center">切换动画：<j-switch v-model:checked="animated" /></j-space>
    <j-tabs v-model:active-key="activeKey" :animated="animated">
        <j-tab-panel title="Tab1" tab-key="1">
            <p>锄禾日当午，汗滴禾下土。<br />谁知盘中餐，粒粒皆辛苦。</p>
        </j-tab-panel>
        <j-tab-panel title="Tab2标题" tab-key="2">
            <p>两个黄鹂鸣翠柳，一行白鹭上青天。<br />窗含西岭千秋雪，门泊东吴万里船。</p>
        </j-tab-panel>
        <j-tab-panel title="Tab3标题很长" tab-key="3">
            <p>日照香炉生紫烟，遥看瀑布挂前川。<br />飞流直下三千尺，疑是银河落九天。</p>
        </j-tab-panel>
    </j-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeKey = ref('1')

const animated = ref(false)
</script>
<template>
    <j-space align="center">切换动画：<j-switch v-model:checked="animated" /></j-space>
    <j-tabs v-model:active-key="activeKey" :animated="animated">
        <j-tab-panel title="Tab1" tab-key="1">
            <p>锄禾日当午，汗滴禾下土。<br />谁知盘中餐，粒粒皆辛苦。</p>
        </j-tab-panel>
        <j-tab-panel title="Tab2标题" tab-key="2">
            <p>两个黄鹂鸣翠柳，一行白鹭上青天。<br />窗含西岭千秋雪，门泊东吴万里船。</p>
        </j-tab-panel>
        <j-tab-panel title="Tab3标题很长" tab-key="3">
            <p>日照香炉生紫烟，遥看瀑布挂前川。<br />飞流直下三千尺，疑是银河落九天。</p>
        </j-tab-panel>
    </j-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeKey = ref('1')

const animated = ref(false)
</script>

销毁控制 ​

通过 destroyInactive 属性控制是否销毁被隐藏的 Tab 内容 DOM。有性能方面的考虑时可以选择开启此属性。

调试时主要是观察 DOM 结构的变化。

销毁不活跃 Tab 内容：
Tab1
Tab2标题
Tab3标题很长

锄禾日当午，汗滴禾下土。
谁知盘中餐，粒粒皆辛苦。

展开查看代码
vue
<template>
    <j-space align="center">销毁不活跃 Tab 内容：<j-switch v-model:checked="destroyInactive" /></j-space>
    <j-tabs v-model:active-key="activeKey" :destroyInactive="destroyInactive">
        <j-tab-panel title="Tab1" tab-key="1">
            <p>锄禾日当午，汗滴禾下土。<br />谁知盘中餐，粒粒皆辛苦。</p>
        </j-tab-panel>
        <j-tab-panel title="Tab2标题" tab-key="2">
            <p>两个黄鹂鸣翠柳，一行白鹭上青天。<br />窗含西岭千秋雪，门泊东吴万里船。</p>
        </j-tab-panel>
        <j-tab-panel title="Tab3标题很长" tab-key="3">
            <p>日照香炉生紫烟，遥看瀑布挂前川。<br />飞流直下三千尺，疑是银河落九天。</p>
        </j-tab-panel>
    </j-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeKey = ref('1')

const destroyInactive = ref(false)
</script>
<template>
    <j-space align="center">销毁不活跃 Tab 内容：<j-switch v-model:checked="destroyInactive" /></j-space>
    <j-tabs v-model:active-key="activeKey" :destroyInactive="destroyInactive">
        <j-tab-panel title="Tab1" tab-key="1">
            <p>锄禾日当午，汗滴禾下土。<br />谁知盘中餐，粒粒皆辛苦。</p>
        </j-tab-panel>
        <j-tab-panel title="Tab2标题" tab-key="2">
            <p>两个黄鹂鸣翠柳，一行白鹭上青天。<br />窗含西岭千秋雪，门泊东吴万里船。</p>
        </j-tab-panel>
        <j-tab-panel title="Tab3标题很长" tab-key="3">
            <p>日照香炉生紫烟，遥看瀑布挂前川。<br />飞流直下三千尺，疑是银河落九天。</p>
        </j-tab-panel>
    </j-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeKey = ref('1')

const destroyInactive = ref(false)
</script>

Tab Panel 预渲染 ​

Tab Panel 下的内容区块默认是懒加载的，如果您需要提前渲染某个 Panel 下的组件内容，可以使用 prerender属性。

注意，prerender属性是作用于 TabPanel 组件，而非 Tabs 组件。

Tab1
Tab2标题
Tab3标题很长

锄禾日当午，汗滴禾下土。
谁知盘中餐，粒粒皆辛苦。

展开查看代码
vue
<template>
    <j-tabs v-model:active-key="activeKey">
        <j-tab-panel title="Tab1" tab-key="1">
            <p>锄禾日当午，汗滴禾下土。<br />谁知盘中餐，粒粒皆辛苦。</p>
        </j-tab-panel>
        <j-tab-panel title="Tab2标题" tab-key="2" prerender>
            <p>两个黄鹂鸣翠柳，一行白鹭上青天。<br />窗含西岭千秋雪，门泊东吴万里船。</p>
        </j-tab-panel>
        <j-tab-panel title="Tab3标题很长" tab-key="3" prerender>
            <p>日照香炉生紫烟，遥看瀑布挂前川。<br />飞流直下三千尺，疑是银河落九天。</p>
        </j-tab-panel>
    </j-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeKey = ref('1')
</script>
<template>
    <j-tabs v-model:active-key="activeKey">
        <j-tab-panel title="Tab1" tab-key="1">
            <p>锄禾日当午，汗滴禾下土。<br />谁知盘中餐，粒粒皆辛苦。</p>
        </j-tab-panel>
        <j-tab-panel title="Tab2标题" tab-key="2" prerender>
            <p>两个黄鹂鸣翠柳，一行白鹭上青天。<br />窗含西岭千秋雪，门泊东吴万里船。</p>
        </j-tab-panel>
        <j-tab-panel title="Tab3标题很长" tab-key="3" prerender>
            <p>日照香炉生紫烟，遥看瀑布挂前川。<br />飞流直下三千尺，疑是银河落九天。</p>
        </j-tab-panel>
    </j-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeKey = ref('1')
</script>

Tabs 属性 ​

参数说明类型默认值必填
activeKey当前激活的 tab 的 keystring | number无是
animated是否开启 tab 切换过渡效果，请注意，动态修改此属性会导致 tab 内容的重新渲染！booleantrue否
centered标签是否居中展示boolean无否
destroyInactive是否销毁被隐藏的 tab 内容 DOM，如果 DOM 数量很大导致卡顿时可以考虑此属性boolean无否

TabPanel 属性 ​

参数说明类型默认值必填
title选项卡标题string无否
tabKey选项卡的唯一标识string | number无是
prerender预渲染，可以用于提前准备好 tab 内容boolean无否

Tabs 事件 ​

Copyright © 2022-2024 All Rights Reserved by Tusi.