mint-ui tabContainer使用方法

tab-container

面板，可切换显示子页面。

常与navbar、tabbar结合使用

Import

按需引入：

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

Vue.component(TabContainer.name, TabContainer);

Vue.component(TabContainerItem.name, TabContainerItem);

全局导入：全局导入后不用再导入

importMintfrom'mint-ui'

import'mint-ui/lib/style.css'

Vue.use(Mint);

API

示例

xxx.vue：

[html] view plain copy

tab 1  

tab 2  

tab 3  

export default {  

  name: 'page-tab-container',  

  data() {  

    return {  

      active: 'tab-container1'  

    };  

  }  

};  

  .item {  

    display: inline-block;  

  }  

  .nav {  

    padding: 10px;  

  }  

  .link {  

    color: inherit;  

    padding: 20px;  

    display: block;  

  }  

show：