vt-tabs

基于vue2 封装的 tabs组件， 提供了选项卡的基本的功能。

Install

npm i -D vt-tabs  import { Tabs, TabsItem } from 'vt-tabs'  // global install Vue.component('Tabs', Tabs) Vue.component('TabsItem', TabsItem)  // scope install    export default {   components: {     Tabs,     TabsItem   } } 

**备注： ** TabsItem 只能被 Tabs 包裹

Usage

<template>   <Tabs closable @tab-remove="tabRemove" @tab-add="tabAdd" @tab-click="tabClick"  v-model="idx">     <TabItem v-for="(tab, index) in tabs">         <span class="tabs-title" slot="title">{{ tab.name }}</span>         <p>{{ tab.content }}</p>     </TabItem>   </Tabs> </template> <script>   import { Tabs, TabItem } from 'vt-tabs'   export default {     components: {       Tabs,       TabItem     },     data(){       return {         idx: 0,         tabs: [           {             disabled: true,             name: 'tabs one',             content: 'hello tabs one'           },           {             name: 'tabs two',             content: 'hello tabs two'           },           {             name: 'tabs three',             content: 'hello tabs three'           }         ]       }     },     mounted(){       console.log('mounted',this.tabs)     },     methods: {       tabRemove(index){         this.tabs.splice(index, 1)         if(this.tabs.length){           this.idx = index - 1 < 0 ? this.tabs.length - 1 : index - 1         }       },       tabClick(index){         this.idx = index       }     }   } </script>  

Tabs interface

props:   closable:     type: Boolean     default: false     description: 按钮的类型，可选值: ``primary``，``success``，``loading``，``warning``，``info``，``danger``   value:     type: Number, String     default: '0'     description: v-model使用，激活哪个tab slots:   default:     description: TabItem， 选项卡的子项 events:   tab-click:     description: 点击tab，参数索引   tab-remove:      description: 删除的tab, 参数索引 

TabItem interface

props:   title:      type: String,     description: tab的title， 优先使用slots.title   closable:      type: Boolean,     description: tab关闭选项，优先使用自身的closable, 否则使用 父组件的closable   disabled:      type: Boolean,     description: 禁用tab， 禁用后不可删除，不可点击 slots:   default:     description: tab对应的内容   title:     description: tab的标题，优先级大于props.title