https://github.com/alexqdjay/vue-tabs

多tab页框架替代router支持vue2.0
https://github.com/alexqdjay/vue-tabs

Last synced: 2 months ago
JSON representation

多tab页框架替代router支持vue2.0

• Host: GitHub
• URL: https://github.com/alexqdjay/vue-tabs
• Owner: alexqdjay
• License: apache-2.0
• Created: 2016-12-02T05:44:04.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-06-25T03:05:55.000Z (over 6 years ago)
• Last Synced: 2024-09-18T20:09:03.150Z (4 months ago)
• Language: JavaScript
• Size: 302 KB
• Stars: 149
• Watchers: 5
• Forks: 44
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue - vue-tabs - tabs?style=social) - 多tab页轻型框架 (UI组件)
• awesome-github-vue - vue-tabs - 多tab页轻型框架 (UI组件)
• awesome-github-vue - vue-tabs - 多tab页轻型框架 (UI组件)
• awesome - vue-tabs - 多tab页轻型框架 (UI组件)

README

        
# Vue-Tabs

[![npm](https://img.shields.io/npm/dw/vue-tabs.svg)]()

> A Vue.js tabs framework replacing the URL-ROUTER for Vue2.0 (多tab页轻型框架，在多tab系统中替代路由)

- [Documentation](./docs)

## Demo  

[查看 DEMO](http://alexqdjay.oschina.io/vue-tab)

![image](./example/assets/shot.png)

## Usage

**Step1. config**

``` JavaScript

// tabs.js

// config

import Hello from './components/Hello'

export default [{

    name: 'home', // name UNIQUE

    title: '首页', // tab's title

    component: Hello

}, {

    name: 'test1',

    title: '测试1',

    component: {

        template: '
测试1
'

    }

}]

```


**Step2. New instance & use**

``` JavaScript

import VueTaber from 'vue-tabs'

import '../vue-tabs.css'

import tabs from './tabs.js'

const vueTaber = new VueTaber({

    tabs

})

Vue.use(VueTaber)

new Vue({

    el: '#app',

    taber: vueTaber,

    template: '',

    components: {

        App

    }

})

```

**Step3. Html Element**

``` html





```


**Step4. Use api to open a tab**

``` JavaScript

this.$taber.open({

    name: item.name

})

```

## Contributing

**[Contributing](./.github/CONTRIBUTING.md)**