在vue中使用mint-ui的示例

本文介绍了mint-ui在vue中的使用示例，并与大家分享如下：

首先把薄荷味的中文文档

最近在使用mint-ui的时候，发现有些插件解释的不是很详细，有些例子找不到使用的代码。github上面的分享全是降价文件，内容都是在线文档

正好我自己也在用，网上能找到的信息也不是很详细，自己写吧。继续更新.嗯，应该没事，我太懒了。希望能给别人带来帮助。

介绍mint-ui的特点

特性介绍

Mint UI包含丰富的CSS和JS组件，可以满足日常移动开发的需求。通过它，我们可以快速构建风格统一的页面，提高开发效率。真正意义上的按需加载组件。只能加载声明的组件及其样式文件，无需担心文件过大。考虑到移动终端的性能门槛，Mint UI采用CSS3处理各种动态效果，避免了浏览器不必要的重绘和重排，让用户获得流畅顺滑的体验。得益于Vue.js高效的组件化方案，Mint UI是轻量级的。即使引入所有文件，压缩文件量也只有~30kb (JS CSS) gzip。该组件库适用于基于vue的手机页面开发。

1.1 .细胞的用途

先丢一张照片

制作switch时，你要在列表的两边制作单词和switch。效果出不来了，我发现很多人和我一样，为了钻switch的文档，找到switch的相关信息，也是走投无路。那么，其实你应该用cell。

mt-cell title=' switch status ' mt-switch v-model=' open value ' @ change=' change status '/mt-switch/mt-cell使用cell的布局并与switch结合。产生以下结果。

2.无限卷轴和导航条一起使用。

Navbar是这样的

无限卷轴是这样的

两者结合就是在mt-tab-container-item id=' 1 '/mt-tab-container-item中嵌套无限滚动，然后效果就出来了。

简单的是酱紫色。

mt-nav bar v-model=' selected ' mt-tab-item id=' 1 '选项一/mt-tab-item mt-tab-item id='2 '选项二/mt-tab-item/mt-nav barmt-tab-container v-model=' selected ' mt-tab-container-item id=' 1 ' div v-无限滚动='loadMore '无限滚动-禁用='loading '无限滚动-disabled-loading-无限滚动-disabled=' 10 ' class=' content '/div/mt-tab-container-item-tab-container

一个小问题是，这是一个页面，滚动条是共享的。也就是说，在tab一中拉出几页数据后，再转到tab二，滚动条的位置不会改变，tab二的内容会拉出很多页数据。如果一个选项卡的数据较少，会影响其他选项卡的数据加载。

在寻找这个问题很久之后，我终于找到了一个简单的解决方法。在无限滚动中，添加一个v-if=selected==id，并将无限滚动与标签中的id和selected组合在一起。当选定的id与id对应时，将执行相应的无限滚动。

无限滚动的代码如下：

div v-无限-滚动='加载更多'无限-滚动-禁用='加载'无限-滚动-距离=' 10 '类='内容' v-if='选中==1 '根据需要修改v-if的条件。

v-无限滚动绑定的方法将在vue挂载后和之前第一次执行，不需要额外调用。

3.拾取器，三级地址链接

有一个很简单的三级联动，以前用的时候没有发现。我自己写了一个。太麻烦了。先放图

先拿到地址

getRegion(){ var root=this；-通过/区域接口获取三级地址，然后存入regionArr - http.get('/region ').然后（函数（数据){ root。regionarr=数据。数据。数据；-存放省-for(var I=0；伊洛特。区域。长度；I){根。区域_省份[i]=root.regionArr[i].价值；} !-存放市-for(var I=0；伊洛特。regionar[0]。孩子们。长度；I){根。region _ city[I]=root。regionar[0].儿童。价值；} !-存放区-for(var I=0；iroot.regionArr[0].儿童[0]。孩子们。长度；I){根。region _ zone[I]=root。regionar[0].儿童[0]。儿童。价值；} root.region=[ { flex: 1，values : root。区域_省份，textAlign: 'left '，className:'picker_Slot' }，{ divider: true，content: '-'，className: 'slot2' }，{ flex: 1，values: root.region_city，textAlign: ' center '，class name : ' picker _ Slot ' } }，然后设置三级地址

onvalushange(picker，values){ var root=this；var str _ 1=[]；var str _ 2=[]；for(root。地区性的中的var I){//获取省，并重置市级名称if(root.regionArr[i]).value==values[0]){ for(root。地区中的风险值j ).children){ str _ 1。push(root。区域.儿童[j].值);//获取市级，并重置区级的名称if(root.regionArr[i]).儿童[j].value==values[1]){ //当市级下不存在区名市，置空if(root.regionArr[i]).儿童[j].孩子们！=null){ for(root。区域一中的var k ).儿童[j].儿童){ str _ 2。push(root。区域.儿童[j].儿童k .值);} } else { str _ 2。push(')；} } } picker.setSlotValues(1，str _ 1)；picker.setSlotValues(2，str _ 2)；} } //赋值，初始时置为上一页返回的值根$set(root.printerMessage，"省份",值[0]==null？root.printerMessage。省份：值[0]);根$set(root.printerMessage，“city”，值[1]==null？root.printerMessage.city :值[1]);根$set(root.printerMessage，“区域”，值[2]==null？root.printerMessage.area :值[2]);}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。