Vue.js的Chrome样式标签组件-vue-tabs-chrome

Vue.js的Chrome样式标签组件-vue-tabs-chrome
插件名称 vue-tabs-chrome
版本号 v0.10.0
发布时间 2020年4月24日
插件作者 viewweiwu

一个小的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