一个小的Vue.js组件，可为标签内容创建可响应的，可拖动的Chrome浏览器样式标签。

安装和下载：

# NPM
$ npm install vue-tabs-chrome --save

使用：

1.将组件插入模板。

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

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

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)
          }
        }
      ]
    }
  }
}

3.所有默认props。

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
}

4.API方法。

// 添加新标签
addTab(tab1, [, ...tab, ...tabN])

// 删除标签
removeTab(tabKey or index)

// 获取标签信息
getTabs()

变更日志：

07/08/2021

• v0.10.0：错误修正

04/20/2021

• v0.9.0：修复：可拖动需要响应单击事件

2020年12月28日

• v0.8.1：错误修正

2020/09/21

• v0.8.0：在插槽后添加制表符

2020/09/07

• v0.7.1：修复：无法关闭

2020年8月18日

• v0.6.0

---

官网：https://github.com/viewweiwu/vue-tabs-chrome

演示：https://www.vue365.cn/code_demo.php?id=309

GitHub下载：https://github.com/viewweiwu/vue-tabs-chrome/archive/master.zip