Tabs 标签页

选项卡切换组件，常用于平级区域大块内容的的收纳和展现。

基础用法

与 TabPane 的 name 对应，用于标识当前激活的是哪一项，name 值默认从 0 开始，默认激活第一项。可以使用 v-model 双向绑定数据。

禁用

禁用某一项。

<template>
    <Tabs>
        <TabPane label="标签一">标签一的内容</TabPane>
        <TabPane label="标签二" disabled>标签二的内容</TabPane>
        <TabPane label="标签三">标签三的内容</TabPane>
    </Tabs>
</template>
<script>
    export default {
    }
</script>

图标

通过设置属性 icon，可以显示一个图标。

<template>
    <Tabs>
        <TabPane label="macOS" icon="logo-apple">标签一的内容</TabPane>
        <TabPane label="Windows" icon="logo-windows">标签二的内容</TabPane>
        <TabPane label="Linux" icon="logo-tux">标签三的内容</TabPane>
    </Tabs>
</template>
<script>
    export default {
    }
</script>

设置属性 size 为 small 可以显示为迷你型，只在 type 为 line 时有效。

卡片样式

设置属性 type 为 card 可以显示卡片样式，常用于容器顶部。

<template>
        <TabPane label="标签一">标签一的内容</TabPane>
        <TabPane label="标签二">标签二的内容</TabPane>
    </Tabs>
</template>
<script>
    export default {
    }
</script>

可关闭

通过设置属性 closable 可以关闭某一项，仅在 type 为 card 时有效。

需结合 @on-tab-remove 事件手动关闭标签页。

<template>
    <Tabs type="card" closable @on-tab-remove="handleTabRemove">
        <TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>
        <TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>
        <TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>
    </Tabs>
</template>
<script>
    export default {
        data () {
            return {
                tab0: true,
                tab1: true,
                tab2: true
            }
        },
        methods: {
            handleTabRemove (name) {
                this['tab' + name] = false;
            }
        }
    }

自定义标签页

设置 label 为 Render 函数后，可以自定义标签页的内容。

附加内容

设置 slot extra 可以在页签右边添加附加操作。

<template>
    <Tabs type="card">
        <TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>
    </Tabs>
</template>
<script>
    export default {
        data () {
            return {
                tabs: 2
            }
        },
        methods: {
            handleTabsAdd () {
                this.tabs ++;
            }
        }
    }
</script>

不使用动画

通过设置属性 animated 为 false 可以禁用动画。

<template>
    <Tabs :animated="false">
        <TabPane label="标签一">标签一的内容</TabPane>
        <TabPane label="标签二">标签二的内容</TabPane>
        <TabPane label="标签三">标签三的内容</TabPane>
    </Tabs>
</template>
<script>
    export default {
    }
</script>

其它样式

可以根据业务自定义 UI，需要一点额外的样式覆盖。