插件名称 | 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
04/20/2021
2020年12月28日
2020/09/21
2020/09/07
2020年8月18日