mars-vue-component-tabs
v0.3.3
Published
vue tabs component
Downloads
23
Readme
Vue Tabs 組件 - A Vue component render tabs
Live Demo
Install
npm install mars-vue-component-tabs --save
Mount
mount with global
//in your main.js
import Tabs from 'mars-vue-component-tabs'
Vue.use(Tabs)
mount with component
import { Tabs, Tab } from 'mars-vue-component-tabs'
export default {
components: {
Tabs,
Tab,
},
}
Use
html
<Tabs :value="currentTag" @change="handleTagChange">
<Tab label="Tab1" index="1">
<div>content......</div>
</Tab>
<Tab label="Tab2" index="2">
<div>content2......</div>
</Tab>
</Tabs>
data
data() {
return {
currentTag: "1",
};
}
methods
methods: {
handleTagChange(value) {
this.currentTag = value
},
}
Use v-for render
html
<Tabs :value="currentTag" @change="handleTagChange">
<Tab v-for="item in tags" :key="item.id" :label="item.tab" :index="item.id">
<div v-html="item.content"></div>
</Tab>
</Tabs>
data
data() {
return {
currentTag: 1,
tags: [
{
id: 1,
tab: "tab1",
content: "<h1>Tab1 Content</h1><br><p>Lorem ...</p>"
},
{
id: 2,
tab: "tab2",
content: "<h1>Tab2 Content</h1><br><p>Lorem ...</p>"
},
{
id: 3,
tab: "tab3",
content: "<h1>Tab2 Content</h1><br><p>Lorem ...</p>"
}
]
};
}