这篇文章主要介绍了vue mint-ui tabbar变组件使用方法及实例代码，非常不错具有参考借鉴价值,需要的朋友可以参考下
新建tabbar.vue
主页
积分商城
微社区
我的 export default { data(){ return{ //选中的tabbar值message为外面页面传入的值selected message:this.selected, //这里使用的icon图标为图片，所以需要加图片改变的传入，若使用阿里图标，则不用加 atabs:this.tabs, } }, props:{ selected: String, tabs:Array, }, watch: { message: function (val, oldVal) { // 这里就可以通过 val 的值变更来确定去向 switch(val){ case 'MainPage': this.$router.push('/mainpage'); break; case 'ShoppingList': this.$router.push('/shoppinglist'); break; case 'GroupList': this.$router.push('/grouplist'); break; case 'UserCenter': this.$router.push('/usercenter'); break; } } },}
登录后复制
在需要使用tabbar组件的页面
引入组件
import tabbar from '../../components/tabbar'export default { components:{tabbar}, data(){ return{ selected:"ShoppingList", tabs:[require("../../assets/images/icon/zhuye.png"),require("../../assets/images/icon/icon42-1.png"), require("../../assets/images/icon/weuquan1.png"),require("../../assets/images/icon/huijia.png")], } },}
登录后复制
html中
立即学习“前端免费学习笔记（深入）”；
登录后复制
补充：
mint-ui —— tabbar示例
Import
按需引入：
import { Tabbar, TabItem } from 'mint-ui';Vue.component(Tabbar.name, Tabbar);Vue.component(TabItem.name, TabItem);
登录后复制
全局导入：全局导入后不用再导入
importMintfrom'mint-ui'import'mint-ui/lib/style.css'Vue.use(Mint);
登录后复制
相关推荐：
Vue.js开发mpvue框架步骤详解
以上就是vue mint-ui tabbar变组件使用的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2764424.html
