浅谈mint-ui 填坑之路

近期上手vue的移动端项目,舍弃了之前自己相对熟悉的mui框架,改为用饿了么团队为了vue量身定做的mint-ui框架。

之前开发的时候觉得mui的文档就足够坑爹了,但当我开始阅读mint-ui这个文档后才发现自己真是太年轻了...

针对一些自己遇到的问题,特此记录成文档,方便日后使用。

swipe组件

因为项目加载eslint的缘故也就没有像之前的项目一样引用swiper框架。

这个轮播图的组件文档实在是不敢恭维(尽管其他的文档也好不到哪里去),官方给出的参数真是少的可怜,一些方法也并没有提到。

官方的api如下图所示,你懂的:

仔细的看了的这个组件的example后,会找到一些常用的方法。

1、轮播默认不播放

需要将auto的值设置为0

2、轮播图的手动控制

利用vue的ref先绑定引用的swipe根标签。

<mt-swipe ref="swipe" class="swipe" :auto="0">
  <mt-swipe-item v-for="img in images" :key="img.id">
    <img :src="img.url"/>
  </mt-swipe-item>
</mt-swipe>

然后利用ref绑定的swipe组件,我们就可以调用到其内部的一些控制方法:

this.$refs.swipe.next() // 转到下一张轮播图
this.$refs.swipe.prev() // 转到前一张轮播图

接下来恐怕就是我找到的最重要的方法:监控当前轮播图激活的索引值

swipe组件的当前索引值被保存在了index之中

我们就可以利用刚才的方法,先在vue每次更新dom的时候将当前激活的索引值保存起来:

beforeUpdate () {
 this.activeIndex = this.$refs.swipe.index
}

然后利用watch方法监控当前swipe的激活索引值就可以进行进行后续的处理了。

watch: {
 activeIndex: function (val, oldVal) {
  console.log('newIndex: %s, oldIndex: %s', val, oldVal)
  // TODO
 }
}

这样swipe组件的一些基本操作总算是填坑完毕了。

picker组件

picker组件也是有很多问题。话不多话,先上官方api:

继续针对slots对象数组的字段说明:

在使用过程之中我们会发现如果直接初始化级联picker中的二级初始值会有问题。

因为按照其demo之中的初始化数据方法,必须使用数组中的索引值做初始化处理。针对一级菜单做

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/976.html