Vue tab切换组件（vue-tabs-chrome）仿谷歌浏览器

 website 下载

描述：

一个小的Vue.js tab切换组件组件，可创建可响应内容选项卡式，可拖动的Chrome浏览器选项卡样式。

使用方法

将组件插入模板。

<template>
  <vue-tabs-chrome 
    v-model="tab" 
    :tabs="tabs" 
  />
</template>

创建一个基本的选项卡组件，并为每个选项卡定义标签，键和图标，如下所示：

export default {
  data () {
    return {
      tab: 'Custom Tab',
      tabs: [
        {
          label: 'google',
          key: 'google',
          favico: require('./assets/google.jpg')
        },
        {
          label: 'facebook',
          key: 'facebook',
          favico: require('./assets/fb.jpg')
        },
        {
          label: 'New Tab',
          key: 'costom key',
          favico: (h, { tab, index }) => {
            return h('span', tab.label)
          }
        }
      ]
    }
  }
}

组件默认配置项。

value: {
  type: [String, Number],
  default: ''
},
tabs: {
  type: Array,
  default: () => []
},
props: {
  type: Object,
  default: () => {
    return {}
  }
},
minWidth: {
  type: Number,
  default: 40
},
maxWidth: {
  type: Number,
  default: 245
},
gap: {
  type: Number,
  default: 7
},
insertToAfter: {
  type: Boolean,
  default: false
},
theme: {
  type: String,
  default: ''
},
isMousedownActive: {
  type: Boolean,
  default: true
},
renderLabel: {
  type: Function
}

API方法。

// add new tab
addTab(tab1, [, ...tab, ...tabN])

// remove tab
removeTab(tabKey or index)

// get tab info
getTabs()