微信端 vue 批量处理开发

之前用开源中国发的这篇，不太会用那个排版，所以还是回来用这个写。
马上又要做下一个功能了，所以赶紧抓紧时间总结一下（没有代码，不敢发）
技术栈vue全家桶+element+less；给一个列表页添加批量处理功能，附带的功能就是全选，筛选，滑动弹窗。微信端仍用element没有用mint，所以类似popup的功能需要自己开发。开发时间一周。
一、popup组件开发
主要用于筛选功能类似手淘的筛选（右弹窗），业务信息的填写（下弹窗）
参照mint源码开发，有以下几个难点：
1.popup组件分为弹出层（pop）和遮盖层（mask）两部分，弹出层滑动效果用transition来做。所以需要用两个transition来分别控制mask的opacity和pop的transform效果。会出现这两个效果不同步的情况，源码是把mask单独拿出来，用JS控制的mask的效果以及z-index的层级关系，再minx混合进来。这里我的做法没有那么复杂，把mask层写在pop层上面就好用了（原因不明）。
2.关闭弹窗，两个渠道：一是点击mask上，二是点击pop里面的×。先将一下我的三个开发阶段。
方案1： 每次回调父组件关闭方法，弊端：每个页面都需要手写一个关闭方法，不符合组件思想
方案2： 修改父组件弹出框的标识符，弊端：每个页面的标识符名称要求一样，很容易出错，不符合组件思想
方案3： this.$emit(‘input’, val)。这个方法可以修改组件的v-model值，从而实现双向绑定，子组件修改父组件的标示位（比如点击按钮，滑块组件出现，那么就是把组件的v-model变为true）。参考：v-model 实现组件props双向绑定
3.弹出层出现后底层不能滑动或者滚动。mint源码写的有些复杂，这里我找到一个比较好用方法：mask层绑定@touchmove.prevent，简单暴力。
4.pop里面的内容在电脑测试能滚动，却不能滑动（和@touchmove.prevent没有关系实测）。很诡异的一个bug，解决方法给pop层绑定v-touch:pan，这个方法虽然滚动里但是有瑕疵，滚动的比较快，但还是可以接受（pop层的设置ref=”popContent”）
5.当下方弹出层高度较小的时候，苹果的键盘弹出会把弹出框挡住（安卓不会），解决方法是检测屏幕大小的变化，弹出键盘会触发window.resize()方法，参考：VueJs 监听 window.resize 方法—窗口变化
6.页面其他fixed定位和position定位且有背景色且有z-index值的单位会对弹出层有影响。原因是transform和opacity会导致z-index失效。也没找到很好的方法，弹出的时候将那些单位的z-index值置为0，以后慢慢优化吧，这里做的不好也是这个组件的关键。层级关系还是做的不好。参考：CSS3 transform 引起z-index失效
7.一些样式问题。右弹窗的高度不能写100%，要写100vh；样式很费时间的，但是没什么可总结的。。。
二、全选组件
element的Checkbox组件可以直接拿过来用，以下开发遇到的问题：
1.checkbox组的是否选中是靠label属性控制的，所以这里要通过样式把label隐藏。
2.当列表中列超过50后，全选会有较明显的延迟，这里在全选方法里写了一个假的loading，按条数计算loading的时间，也算没有办法的办法。
3.在下弹窗填写这一条的业务信息后，自动选中这一条，这个功能未实现。
4.一些样式问题
三、筛选功能
1.最开始筛选用的el-dropdown组件，但是在移动端有bug：下拉的内容点击后，下拉收回又下拉出来，二次点击后消失。最后用的select代替，但是样式上有一些bug，但可以接受。
2.选过的条件显示成标签，有快捷筛选一栏，共三个标签，为历史记录，常用的筛选条件。通过vuex写在用户里面。这里介绍一个ES6数组去重的方法（数组为数字不为对象）Array.from(new Set(arr))，参考：ES6数组去重的最佳实践
这个功能开发是自己设计自己开发，还是比较开心。