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 相关文章推荐
input 高级限制级用法
Mar 26 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
简单的js表格操作
Sep 24 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 Javascript
Vue监视数据的原理详解
Feb 24 Vue.js
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检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
Python列表推导式实现代码实例
2020/09/09 Python
Python爬虫教程知识点总结
2020/10/19 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
语文教学随笔感言
2014/02/18 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
学习心得体会
2019/06/20 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers