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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
js控制CSS样式属性语法对照表
Dec 11 Javascript
js 动态加载事件的几种方法总结
Dec 25 Javascript
Jquery解析json数据详解
Dec 26 Javascript
node.js中的fs.fstatSync方法使用说明
Dec 15 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
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
PHP中的表达式简述
2016/05/29 PHP
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
Angular的$http与$location
2016/12/26 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
从零学Python之引用和类属性的初步理解
2014/05/15 Python
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
Python脚本实现下载合并SAE日志
2015/02/10 Python
python网络编程之文件下载实例分析
2015/05/20 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
当当网软件测试笔试题
2015/11/24 面试题
酒店服务与管理毕业生求职信
2013/11/02 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
创业计划书之面包店
2019/09/17 职场文书
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏