A Vue2 component for Chrome-like tabs.
Drag-and-drop support provided by Draggabilly by @desandro.
If you are using Vue3, please see here. https://github.com/viewweiwu/vue3-tabs-chrome
https://viewweiwu.github.io/vue-tabs-chrome/
example: https://codesandbox.io/s/kind-wave-00ipv?file=/src/App.vue
use VueRouter: https://codesandbox.io/s/twilight-forest-mm55be?file=/src/App.vue
https://codepen.io/viewweiwu/pen/GRmKaZZ
npm i vue-tabs-chrome -S
<template>
<vue-tabs-chrome v-model="tab" :tabs="tabs" />
</template>
<script>
import Vue from 'vue'
import VueTabsChrome from 'vue-tabs-chrome'
export default {
components: {
VueTabsChrome
},
data() {
return {
tab: 'google',
tabs: [
{
label: 'google',
key: 'google',
closable: false,
favicon: require('./assets/google.jpg')
},
{
label: 'facebook',
key: 'facebook',
favicon: require('./assets/fb.jpg')
},
{
label: 'New Tab',
key: 'any-string-key',
favicon: (h, { tab, index }) => {
return h('span', tab.label)
}
}
]
}
}
}
</script>
Attributes | Description | Type | Default |
---|---|---|---|
tabs | tabs configuration. Details are mentioned below. | Array | [] |
value / v-model | binding value | String | - |
props | configuration options, Details are mentioned below. | ||
insert-to-after | Insert to tag's after | Boolean | false |
is-mousedown-active | set tab is active when mousedown | Boolean | true |
render-label | render label | Function(tab, index) | - |
auto-hidden-close-icon-width | auto hidden close tab width. if tabWidth < 120, close icon can not show. If you don’t want this feature, you can set the value to 0. | Number | 120 |
on-close | when tab close btn click. if return false, it cannot be closed. | Function(tab, key, index) | - |
tab-close-width | tab close icon width. | Number | 16 |
Attributes | Description | Type | Default |
---|---|---|---|
label | tab label | String | - |
key | tab key | String | - |
class | tab class | String | - |
closable | tab closable | Boolean | true |
dragable | tab tragable | Boolean | true |
swappable | tab swappable | Boolean | true |
favicon | tab favicon. Custom favicon renderer. It uses Vue's render function. It accepts two arguments: the first is h, the second is an object. including tab and index | Function, required image | - |
Attributes | Description | Type | Default |
---|---|---|---|
label | specify which key of tab object is used as the tab's label | String | 'label' |
key | specify which key of tab object is used as the tab's key | String | 'key' |
Method | Description | Parameters |
---|---|---|
addTab | add tab | (tab1, [, ...tab, ...tabN]) |
removeTab | remove tab | (tabKey or index) |
getTabs | get tabs | - |
Event Name | Description | Parameters |
---|---|---|
click | Triggered when the user's pointer is pressed and unpressed and has not moved enough to start dragging. | (event, tab, index) |
swap | Swap tab | (tab, targetTab) |
remove | Remove tab | (tab, index) |
contextmenu | Contextmenu event | (event, tab, index) |
dragstart | Tab dragstart event | (event, tab, index) |
dragging | Tab dragstart event | (event, tab, index) |
dragend | Tab dragend event | (event, tab) |
Attributes | Description |
---|---|
after | Tab after slot |
close-icon | Close icon |
- feat: Add Custom Close Button.
- fix: 'v0.9.1' doesn't work
- fix: 'dragable' needs to respond to the 'click' event.
- feat: tab can set dragable.
- feat: tab can set swappable.
- feat: can be introduced with "Vue.components" instead of "Vue.use".
- feat: new example UI.
- feat: new 'Chrome UI' example.
- feat: new 'swap & drag' example.
- remove: remove 'Save to Localstorage' example.
fix: tab[key] => tab[this.tabKey]
feat: add after slots feat: add drag events
fix: closable not work feat: auto hidden close tab width
add new feature: tab close event listener & tab custom class
add new feature: tab closable
MIT