A Vue3 component for Chrome-like tabs.<br> Drag-and-drop support provided by Draggabilly by @desandro.
npm install vue3-tabs-chromeA Vue3 component for Chrome-like tabs.
Drag-and-drop support provided by Draggabilly by @desandro.
Currently there is only a simple api, waiting for the completion.
If you are using Vue2, please see here.
https://github.com/viewweiwu/vue-tabs-chrome
https://viewweiwu.github.io/vue3-tabs-chrome/
https://codesandbox.io/s/crazy-mcclintock-p514v?file=/src/App.vue
``bash
npm i vue3-tabs-chrome -S
yarn add vue3-tabs-chrome -S
`
`html
`
| Attributes | Description | Type | Default |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------- | ------- |
| tabs | tabs configuration. Details are mentioned below. | Array | [] |
| modelValue / v-model | binding value | String | - |
| 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) | - |
| Attributes | Description | Type | Default |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ------- |
| label | tab label | String | - |
| key | tab key | String | - |
| class | tab class | String | - |
| closable | tab closable | Boolean | true |
| dragable | tab dragable | Boolean | true |
| swappable | tab swappable | Boolean | true |
| favico | tab favico. Custom favico 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(tab, index), image src | - |
| Method | Description | Parameters |
| --------- | ----------- | --------------------------- |
| addTab | add tab | (tab1, [, ...tab, ...tabN]) |
| removeTab | remove tab | (tabKey or index) |
| 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 |
2023-10-16
fix: dragable = false No click event is triggered. #19
2022-04-12
fix: remove debugger trigger. #8
2022-04-06`
fix: is-mousedown-active bug. #7
feat: add TypeScript support. #PR5
MIT