4_TabContainer

2019独角兽企业重金招聘Python工程师标准>>>

1.配置路由

 

 

2. 使用

 

 

<template>

<div id="tab">

<div class="nav">

<mt-button size="small" @click.native.prevent="active = 'tab-container1'">tab 1</mt-button>

<mt-button size="small" @click.native.prevent="active = 'tab-container2'">tab 2</mt-button>

<mt-button size="small" @click.native.prevent="active = 'tab-container3'">tab 3</mt-button>

</div>

 

<div class="page-tab-container">

<mt-tab-container class="page-tabbar-tab-container" v-model="active">

<mt-tab-container-item id="tab-container1">

home

</mt-tab-container-item>

 

<mt-tab-container-item id="tab-container2">

order

</mt-tab-container-item>

 

<mt-tab-container-item id="tab-container3">

mine

</mt-tab-container-item>

</mt-tab-container>

</div>

</div>

</template>

 

<script>

import { TabContainer, TabContainerItem, Cell } from 'mint-ui'

 

export default {

name: 'tab',

data () {

return {

active: 'tab-container1'

}

},

components: {

MtTabContainer: TabContainer,

MtTabContainerItem: TabContainerItem,

MtCell: Cell

}

}

</script>

 

<style lang="css" scoped>

 

.nav {

padding: 10px;

}

 

 

</style>

转载于:https://my.oschina.net/u/3783808/blog/1628159