Skip to content

alexqdjay/vue-tabs

Folders and files

NameName
Last commit message
Last commit date
Dec 4, 2016
Dec 10, 2017
Jun 25, 2018
Aug 10, 2017
Jun 25, 2018
Jun 25, 2018
Nov 27, 2016
Dec 10, 2017
Nov 27, 2016
Nov 27, 2016
Dec 10, 2017
Dec 10, 2017
Nov 26, 2016
Jan 22, 2018
Nov 27, 2016
Dec 11, 2017
Dec 10, 2016
Dec 11, 2017
Dec 11, 2017
Dec 10, 2017

Repository files navigation

Vue-Tabs

npm

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

Demo

查看 DEMO

image

Usage

Step1. config

// 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: '<h2>测试1</h2>'
    }
}]

Step2. New instance & use

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: '<App/>',
    components: {
        App
    }
})

Step3. Html Element

<div id="app">
<vue-tabs></vue-tabs>
</div>

Step4. Use api to open a tab

this.$taber.open({
    name: item.name
})

Contributing

Contributing