标签页(vTabs)

子组件

pane

vPane组件只在vTabs组件中使用,再别处使用将只产生一个section标签来包装代码

单组件引入

import <name> from ‘vucc/tabs’;
import <name> from ‘vucc/pane’;

模板说明

标签页组件使用了slot分发技特性详见,主要分发3块自定义内容
分别是:头部的额外操作部分name = operate,头部部分name = header,页签内容部分:name = panes

示例


默认 tabs(带额外操作和图标头部)


额外操作
选项卡1
选项卡2
选项卡3


卡片式


选项卡1
选项卡2
选项卡3


面板式


选项卡1
选项卡2
选项卡3


代码 V

<v-tabs type="" :on-change="switchChange">
    <div slot="operate">
        <v-button>额外操作</v-button>
    </div>
    <div slot="header">
        <div class="a">
            <i class="vci vci-apple"></i>
            <span>选项卡1</span>
        </div>
        <div>选项卡2</div>
        <div>选项卡3</div>
    </div>
    <v-pane></v-pane>
    <v-pane></v-pane>
    <v-pane></v-pane>
</v-tabs>
<v-tabs type="card" :active-index.sync="activeIndex">
    <div slot="header">
        <div>选项卡1</div>
        <div>选项卡2</div>
        <div>选项卡3</div>
    </div>
    <v-pane></v-pane>
    <v-pane></v-pane>
    <v-pane></v-pane>
</v-tabs>
<v-tabs type="panel" size="small" :active-index="1">
    <div slot="header">
        <div>选项卡1</div>
        <div>选项卡2</div>
        <div>选项卡3</div>
    </div>
    <v-pane></v-pane>
    <v-pane></v-pane>
    <v-pane></v-pane>
</v-tabs>


data() {
    return {
        activeIndex: 2
    }
},
methods: {
    switchChange(value) {
        console.log('Tab switch result is :', value)
    },
    buttonClick() {
        console.log('u has been click')
    }
},



属性

参数 说明 类型 可选值 默认值
type 标签页样式类型 String line/card/panel line
size 标签的大小 String large/small/normal normal
activeIndex 当前选中的标签页 Number - 0

方法

方法名 说明 类型 参数 默认值
onChange 切换标签页时的回调 Function curIndex,当前的标签索引 -
← dialog类弹窗(vDialog) 滑动条(vSlider) →