vue中mint-ui的使用方法


Posted in Javascript onApril 04, 2018

mint-ui在vue中的使用,供大家参考,具体内容如下

首先放上mint-ui中文文档

近来在使用mint-ui,发现部分插件在讲解上并不是很详细,部分实例找不到使用的代码。github上面的分享,里面都是markdown文件,内容就是网上的文档
刚好自己在用,网上能找到的资料也不是很详细,自己写写咯。持续更新...emmmmm,应该可以吧,我这么懒。希望能给别人带来帮助。

介绍一下mint-ui的特性

特性介绍

  • Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。
  • 真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大。
  • 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。
  • 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化。即使全部引入,压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

这个组件库,适合于基于vue的手机页面开发。

1.cell的使用

先丢个图↓

vue中mint-ui的使用方法

在做switch的时候,想做成文字和switch在列表的两侧。效果出不来,发现有很多人跟我一样死命的钻switch的文档,以及找switch的相关资料。然后实际上,应该用cell才对。

<mt-cell title="开关状态">
 <mt-switch v-model="openValue" @change="changeStatus"></mt-switch>
</mt-cell>

利用cell的布局,和switch相结合。产生下面的结果。

vue中mint-ui的使用方法

2.Infinite scroll 和 Navbar结合使用

Navbar 是这样的↓

vue中mint-ui的使用方法

Infinite scroll 是这样的↓

vue中mint-ui的使用方法

两个结合起来,就是把Infinite scroll嵌套在 <mt-tab-container-item id="1"></mt-tab-container-item>里面,然后效果就出来了。

简单的就是酱紫的。

<mt-navbar v-model="selected" >
 <mt-tab-item id="1">选项一</mt-tab-item>
 <mt-tab-item id="2">选项二</mt-tab-item>
</mt-navbar>
<mt-tab-container v-model="selected">
 <mt-tab-container-item id="1">
 <div v-infinite-scroll="loadMore"
  infinite-scroll-disabled="loading"
  infinite-scroll-distance="10"
  class="content"
 >
 </div>
 </mt-tab-container-item>
 <mt-tab-container-item id="2">
 <div v-infinite-scroll="loadMoreReceive"
  infinite-scroll-disabled="loadingReceive"
  infinite-scroll-distance="10"
  class="content"
 >
 </div>
 </mt-tab-container-item>
</mt-tab-container>

这样基本页面就出来了。

vue中mint-ui的使用方法

有个小问题就是,这是一个页面,滚动条是共用的。也就是说,你在选项卡一拉出来好几页数据之后,再到选项卡二,滚动条的位置是不会变的,你的选项卡二的内容,会被拉出来好多页的数据。如果某个选项卡的数据比较少,会影响到其他选项卡的数据加载。

这个问题,找了半天,最后发现一个和简单的办法。在Infinite-Scroll里面,添加一个v-if=selected == id,把Infinite-scroll和选项卡的id、selected相结合,选中的selected与id对应的时候,才进行对应的Infinite-Scroll。

Infinite-Scroll的代码如下:

<div v-infinite-scroll="loadMore"
 infinite-scroll-disabled="loading"
 infinite-scroll-distance="10"
 class="content"
 v-if="selected == 1"
>

根据需要,v-if的条件进行修改。

v-infinite-scroll 所绑定的方法,会在vue的mounted之后,before之前第一次执行,不需要另外调用。

3.Picker,地址三级联动

这里有个很简洁的三级联动,之前要用的时候没找到。自己写的一个,好麻烦。先放图

vue中mint-ui的使用方法

首先获取地址

getRegion(){
 var root=this;
 <!-- 通过/region 接口获取三级地址,然后存入regionArr -->
 http.get("/region").then(function (data) {
 root.regionArr=data.data.data;
 <!-- 存放省 -->
 for(var i=0;i<root.regionArr.length;i++){
  root.region_province[i]=root.regionArr[i].value;
 }
 <!-- 存放市 -->
 for(var i=0;i<root.regionArr[0].children.length;i++){
  root.region_city[i]=root.regionArr[0].children[i].value;
 }
 <!-- 存放区 -->
 for(var i=0;i<root.regionArr[0].children[0].children.length;i++){
  root.region_zone[i]=root.regionArr[0].children[0].children[i].value;
 }
 root.region=[
  {
  flex: 1,
  values: root.region_province,
  textAlign: 'left',
  className:'picker_Slot'

  },
  {
  divider: true,
  content: '-',
  className: 'slot2'
  },
  {
  flex: 1,
  values: root.region_city,
  textAlign: 'center',
  className:'picker_Slot'
  },
  {
  divider: true,
  content: '-',
  className: 'slot2'
  },
  {
  flex: 1,
  values: root.region_zone,
  textAlign: 'right',
  className:'picker_Slot'
  }
 ]

 });

},

然后设置三级地址

onValuesChange(picker, values) {
 var root=this;
 var str_1=[];
 var str_2=[];
 for(var i in root.regionArr){
 // 获取省,并重置市级名称
 if(root.regionArr[i].value == values[0]){
  for(var j in root.regionArr[i].children){
  str_1.push(root.regionArr[i].children[j].value);
  // 获取市级,并重置区级的名称
  if(root.regionArr[i].children[j].value == values[1]){
   // 当市级下不存在区名市,置空。
   if(root.regionArr[i].children[j].children != null){
   for(var k in root.regionArr[i].children[j].children){
    str_2.push(root.regionArr[i].children[j].children[k].value);
   }
   }else{
   str_2.push(" ");
   }
  }
  }
  picker.setSlotValues(1, str_1);
  picker.setSlotValues(2, str_2);
 }
 }

 // 赋值,初始时置为上一页返回的值
 root.$set(root.printerMessage,'province',values[0] == null ? root.printerMessage.province : values[0]);
 root.$set(root.printerMessage,'city',values[1] == null ? root.printerMessage.city : values[1]);
 root.$set(root.printerMessage,'area',values[2] == null ? root.printerMessage.area : values[2]);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。 

Javascript 相关文章推荐
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
js拖拽一些常见的思路方法整理
Mar 19 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 Javascript
JS 数组基本用法入门示例解析
Jan 16 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 #Javascript
JS实现DOM删除节点操作示例
Apr 04 #Javascript
JS实现的DOM插入节点操作示例
Apr 04 #Javascript
AngularJS 应用模块化的使用
Apr 04 #Javascript
vue todo-list组件发布到npm上的方法
Apr 04 #Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 #Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 #Javascript
You might like
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
PHP CURL获取cookies模拟登录的方法
2013/11/04 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
一个js实现的所谓的滑动门
2007/05/23 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
ajax异步请求详解
2017/01/06 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
Vue.js用法详解
2017/11/13 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
Python根据服务获取端口号的方法
2019/09/25 Python
解决Python中回文数和质数的问题
2019/11/24 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
财务整改报告范文
2014/11/05 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers
nginx实现动静分离的方法示例
2021/11/07 Servers