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 相关文章推荐
JS宝典学习笔记(下)
Jan 10 Javascript
jquery ajax 登录验证实现代码
Sep 23 Javascript
javascript 按回车键相应按钮提交事件
Nov 02 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
删除节点的jquery代码
Jan 13 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
基于js对象,操作属性、方法详解
Aug 11 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 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
php数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
Python enumerate索引迭代代码解析
2018/01/19 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
django orm模块中的 is_delete用法
2020/05/20 Python
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
资金主管岗位职责范本
2014/03/04 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
C++程序员求职信范文
2014/04/14 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
违纪开除通知书
2015/04/25 职场文书
人身损害赔偿协议书
2016/03/22 职场文书