# 安装

 npm i ttabs --save

# 全局引入

 import TTabs from 'ttabs'
 import 'ttabs/lib/ttabs.css'
 Vue.use(TTabs)

# 基本使用

拖拽交换位置,支持.sync,同步更新

拖拽基于sortablejs
[]

tab数量比较多时出现滚动条

这是第2选项卡

代码
<template>
  <t-tabs v-model="active" :list.sync="list1">
    <t-tab-pane 
      v-for="item in list1" 
      :name="item.name" 
      :label="item.label" 
      :key="item.name">
      <p>这是第{{item.index}}选项卡</p>
    </t-tab-pane>
  </t-tabs>
</template>

<script>
export default {
  data () {
    return {
      active: 'tab2',
      list1: []
    }
  },
  created () {
    for (let i = 0; i < 20; i++) {
      this.list1.push({
        index: i + 1,
        name: 'tab' + (i + 1),
        label: 'tab' + (i + 1)
      })
    }
  }
}
</script>

# slot

遮罩

通过slot插槽,插入遮罩,可插入到需要的位置