vue mint tarbar使用

<template>
<div class="page-tabbar">
<div class="page-wrap">
<div class="page-title">Tabbar</div>
<div>
<mt-cell class="page-part" title="当前选中" :value="selected" />
</div>
<mt-tab-container class="page-tabbar-container" v-model="selected">
<mt-tab-container-item id="首页">
<v-home></v-home>
</mt-tab-container-item>
<mt-tab-container-item id="订单">
dingdan
</mt-tab-container-item>
<mt-tab-container-item id="发现">
faxian
</mt-tab-container-item>
<mt-tab-container-item id="我的">
wode
</mt-tab-container-item>
</mt-tab-container>
</div>

<mt-tabbar v-model="selected" fixed>
<mt-tab-item id="首页" @click.native="toggleTab('C')">
<img slot="icon" src="../assets/first.png" v-show="!s.isC">
<img slot="icon" src="../assets/first2.png" v-show="s.isC">
首页
</mt-tab-item>
<mt-tab-item id="订单" @click.native="toggleTab('R')">
<img slot="icon" src="../assets/bao-jie.png" v-show="s.isC">
<img slot="icon" src="../assets/check.png" v-show="!s.isC">
订单
</mt-tab-item>

<mt-tab-item id="我的" @click.native="toggleTab('S')">
<img slot="icon" src="../assets/bao-jie.png" v-show="s.isC">
<img slot="icon" src="../assets/check.png" v-show="!s.isC">
我的
</mt-tab-item>
</mt-tabbar>
</div>
</template>

<script>
import Home from "./Home.vue"
export default {
name: 'page-tabbar',
data() {
return {
selected: '首页',
s: { //分别对应四个 tab
isC: !1,
isR: !0,
isD: !0,
isS: !0
},
};
},
methods:{
clear: function(state) { //清空状态
for (var k in this.s)
this.$set(this.s, k, !0);
},
toggleTab: function(state) { //更换图标
this.clear(state); // 选中前先重置其他tab
if (this.s["is" + state]) //如果没有选中则取反显示
this.$set(this.s, ["is" + state], !1);
}

},
components:{
"v-home":Home
}
};
</script>

<style>
.page-tabbar {
overflow: hidden;
height: 100vh;
}

.page-wrap {
overflow: auto;
height: 100%;
padding-bottom: 100px;
}
</style>