vue mint-ui tabbar变组件使用


Posted in Javascript onMay 04, 2018

新建tabbar.vue

<template>
 <mt-tabbar v-model="message" fixed>
    <mt-tab-item id="MainPage">
      <img slot="icon" :src="this.atabs[0]">
      主页
    </mt-tab-item>
    <mt-tab-item id="ShoppingList">
      <img slot="icon" v-bind:src="this.atabs[1]">
      积分商城
    </mt-tab-item>
    <mt-tab-item id="GroupList">
      <img slot="icon" v-bind:src="this.atabs[2]">
      微社区
    </mt-tab-item>
    <mt-tab-item id="UserCenter">
      <img slot="icon" v-bind:src="this.atabs[3]">
      我的
    </mt-tab-item>
  </mt-tabbar>
</template>
<script>
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;
      }
    }
  },
}
</script>

在需要使用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中

<tabbar :selected="selected" :tabs='tabs'></tabbar>

补充:

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 mint-ui tabbar变组件使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript vvorld 在线加密破解方法
Nov 13 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 #Javascript
原生javascript AJAX 三级联动的实现代码
May 04 #Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 #Javascript
vue裁切预览组件功能的实现步骤
May 04 #Javascript
详解vue组件基础
May 04 #Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 #Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 #jQuery
You might like
一个oracle+PHP的查询的例子
2006/10/09 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
jQuery的学习步骤
2011/02/23 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
Angular 表单控件示例代码
2017/06/26 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
python对象与json相互转换的方法
2019/05/07 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
python实现机器人卡牌
2019/10/06 Python
python中如何使用insert函数
2020/01/09 Python
django使用JWT保存用户登录信息
2020/04/22 Python
Python网页解析器使用实例详解
2020/05/30 Python
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
网络教育毕业生自我鉴定
2013/10/10 职场文书
英语简历自我评价
2014/01/26 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android
nginx搭建NFS网络文件系统
2022/04/14 Servers