1.引入mint-ui
1).使用 vue-cli
npm install -g vue-cli
vue init webpack projectname
2). 部分引入
在main.js中写入：
import 'mint-ui/lib/style.css'
import { Tabbar, TabItem } from 'mint-ui';
2.引入tabbar
在main.js中写入：
Vue.component(Tabbar.name, Tabbar);
Vue.component(TabItem.name, TabItem);
vue中app.vue 和main.js的关联：
main.js是入口文件， 作用：初始化vue实例并使用需要的插件。
App.vue是主组件，所有页面都是在App.vue下进行切换的，所有的路由都是App.vue的子组件。
3.使用tabbar
html:
<mt-tabbar v-model="selected">
<mt-tab-item id="首页">
<img slot="icon" src="">
首页
</mt-tab-item>
<mt-tab-item id="分类">
<img slot="icon" src="">
分类
</mt-tab-item>
<mt-tab-item id="发现">
<img slot="icon" src="">
发现
</mt-tab-item>
<mt-tab-item id="购物车">
<img slot="icon" src="">
购物车
</mt-tab-item>
<mt-tab-item id="我的">
<img slot="icon" src="">
我的
</mt-tab-item>
</mt-tabbar>
js:
<script>
export default {
name: 'home',
data () {
return {selected: '首页'}
},
watch: {
selected: function (val, oldVal) {
console.log(val)
// click后打印出当前mt-tab-item的id
}
}
}
</script>
效果：
tabbar.png
