vue mint-ui tabbar变组件使用
时间:2019-04-14
本文章向大家介绍vue mint-ui tabbar变组件使用,主要包括vue mint-ui tabbar变组件使用使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
新建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变组件使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- [原创]web application中使用Profile应该注意的问题
- MRTG FOR WINDOWS 安装指南
- 几种常见复合sql查询语句的linq写法[继续补充中]
- [原创]在msmq3.0中使用http协议发送消息
- 微信小程序开发探索之路
- 前端周记 2017 年终总结
- asp.net mvc中的路径选择
- MVC中实现加载更多
- 在ASP.NET MVC 中获取当前URL、controller、action
- [转自Scott]ASP.NET MVC框架(第四部分): 处理表单编辑和提交场景
- MVC前台Post/Get异步获得数据时参数的取值问题
- IQueryable与foreach的困惑?
- ModalPopupExtender用法示例
- MVC中局部视图的使用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- markdown转为pdf文件
- [已解决]报错:Required request body is missing
- jupyter notebook修改默认路径和浏览器
- python selenium while 循环
- implicitly_wait()隐式等待
- [已解决]python FileNotFoundError: [WinError 3] for getsize(filepath)
- [已解决]ValueError: row index was 65536, not allowed by .xls format
- 记一次由Redis分布式锁造成的重大事故,避免以后踩坑!
- ES6部分源码重写 -1(ES5-构造函数解析)
- ES6部分源码重写 -2(ES6-构造函数初步解析)
- ES6部分源码重写 -3(ES6-ES5的方式来手写部分源码)
- ES6部分源码重写 -4(1-classES7中的扩展)
- ES6- Set-1之使用方法
- ES6- Set-2之去重—并集—交集—差集
- ES6- Map-1介绍及常用api