Components

vc-tabs

Install

npm install vc-tabs --save
// build version
import vcTabs from 'vc-tabs'
// recommend for *.vue project for small bundle size
import vcTabs from 'vc-tabs/src/Tabs.vue'
// and get the child component
const vcTab = vcTabs.vcTab
// commonjs
require('./dist/build.min.js')
// script tag
<script src='./dist/build.min.js'></script>

Usage

props

id

可传入id,关闭$parent的autoIndex来用外界传入的index做tab的渲染,高级用法，一般无需使用

‘header’

tab title

disabled

不响应点击事件，达到不会切换tab的disabled效果

Tabset props

name

removeable

trigger

delay

effect

active

autoIndex

example

import Vue from 'vue'
import vcTabs from 'vcTabs'
const vcTab = vcTabs.vcTab
new Vue({
    el: '#app',
    data () {
        return {
            active: 0,
            trigger: 'hover',
            autoIndex: true,
            renderData: null,
            header0: 'header0',
            header1: 'header1',
            header2: 'header2'
        }
    },
    ready () {
        this.renderData = this.$refs.tabs.renderData
    },
    methods: {
        deleteTheTab () {
            this.renderData.splice(0, 1)
        }
    },
    components: {
        vcTabs,
        vcTab
    }
})
<vc-tabset 
    v-ref:tabs
    :trigger="trigger"
    :active="active"
    :removeable="true"
    :auto-index="autoIndex"
>
    <vc-tab
        :header="header0"
    >
        <div>content0</div>
    </vc-tab>
    <vc-tab
        :header="header1"
    >
        <div>content1</div>
    </vc-tab>
    <vc-tab
        :header="header2"
    >
        <div>content2</div>
    </vc-tab>
    <vc-tab
        :header="header0"
    >
        <div>content0</div>
    </vc-tab>
</vc-tabset>