# vue-sortable-tab

> A vue sortable Tab

Latest version **1.0.8** (published 2019-12-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-sortable-tab
pnpm add vue-sortable-tab
yarn add vue-sortable-tab
bun add vue-sortable-tab
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2019-12-19 |
| First published | 2019-08-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 168.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Kylin |
| Maintainers | zhouql |
| Keywords | vue, sortable, tab |

## Links

- npm: https://www.npmjs.com/package/vue-sortable-tab
- npm.io page: https://npm.io/package/vue-sortable-tab

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [@shopify/draggable](https://npm.io/package/@shopify/draggable.md) 1.0.0-beta.5

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.0.8 (latest) — 2019-12-19
- 1.0.7 — 2019-12-16
- 1.0.6 — 2019-10-30
- 1.0.5 — 2019-10-30
- 1.0.4 — 2019-09-03
- 1.0.3 — 2019-09-03
- 1.0.2 — 2019-08-30
- 1.0.1 — 2019-08-30
- 1.0.0 — 2019-08-30

## README

# vue-sortable-tab

> 可拖拽排序的VUE-TAB组件

## Install
```shell
npm install vue-sortable-tab -S || yarn add vue-sortable-tab
```

## Links

- [issues](https://github.com/mrKylinZhou/vue-sortable-tab/issues)
- [log](./CHANGELOG.md)

## Quick Start
```html
<template>
  <div class="s">
    <tab v-model="value" :lists="lists" @add="add" @sorted="sorted">
      <tab-head
        slot="head"
        v-for="item in lists"
        :key="item.value"
        :value="item.value">
        {{ item.value }}
      </tab-head>
      <tab-content
        v-for="item in lists"
        :key="item.value"
        :value="item.value">
        {{ item.value }}
      </tab-content>
    </tab>
  </div>
</template>

<script>
import TAB from 'vue-sortable-tab'

export default {
  name: 'HelloWorld',

  data() {
    return {
      value: '1',
      lists: [
        {
          name: '1',
          value: '1'
        },
        {
          name: '2',
          value: '2'
        },
        {
          name: '3',
          value: '3'
        },{
          name: '4',
          value: '4'
        }
      ]
    }
  },

  components: {
    Tab: TAB.Tab,
    TabHead: TAB.TabHead,
    TabContent: TAB.TabContent
  },
  
  methods: {
    add() {
      const k = (this.lists.length + 1).toString()
      this.lists.push({
        name: k,
        value: k
      })
    },
    sorted(v) {
      this.value = v.moveItem.value
    }
  }
}
</script>

```

## LICENSE
MIT

---
_Source: https://npm.io/package/vue-sortable-tab · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._