快速创建VUE移动端上传图片功能

主要功能：限制张数、大小压缩、同时上传多张、上传后可编辑删除、上传中和上传失败状态显示。

使用配置：使用vantUI、axios请求经过封装、安装image-compressorjs压缩

npm install image-compressorjs //注意是image-compressorjs不是image-compressor

ps：从父级页面传入相应的值到props里面

使用的是vue-cli+webpack，通过npm来安装的

在mainjs中引入lib-flexible

通过meta标签，设置设备宽度以及缩放比例

一款 postcss 插件，用于将单位转化为 rem

在安装postcss-pxtorem的时候会生成一个文件postcssrcjs
在根目录找到postcssrcjs文件，可以在此配置的基础上根据项目需求进行修改，如：

对于我们的最终效果来说，是不是很简单呢？
当然，如果我这里写三个h-wrapper的话，我们自然而然就变成了三级联动

最外层的slector组件用来暴露在外部显示的文字，以及控制级联选择器的显示隐藏，在每一次开始一个新的功能的时候，我们应该先完成重点的功能，重点功能完成之后，再去修改一些样式包括交互效果

对于这个模板来说，需要解释的地方很少，我都写在注释里边

首先需要重点提一下的是在mounted方法中，我们使用了this$on方法，订阅了一个在当前组件内并没有发布的事件，这个事件，我定义在了h-wrapper这个组件中，稍后可以看到
其余的地方没有太复杂的功能和逻辑，就不一一解释

在模板中，需要重点关注的其实就是两个style，以及四个事件，当然了，还有插槽的位置，我这里使用了一个小技巧，在原始位置直接写好了四个option，并且其中一个还显示请选择，用来保证可选项的位置永远都可以处在最中间的位置

在逻辑中，我通过 *** 作activeIndex这个索引值来动态的修改数据中ul的位移，使得当前永远显示的是对应索引与option高度计算出的位置
通过touchstart、touchmove、touchend三个事件来 *** 作元素的位置与滑动
通过watch侦听对应属性，并实时触发事件，使得级联选择器发生改变，达到内外同步
通过mounted与updated钩子函数来保证当前的级联选择器属性会随着刷新而刷新
通过slot插槽来显示外部传入的option选项

对于option组件来说，并没有多少内容，它只需要负责显示数据，以及让级联选择器可以正确的获取到值即可

首先当前这个级联选择器的样式，我没有做太多的处理，但是已经很好看了有没有！

最终，我们就已经成功的打造了一款移动端的级联选择器，可以实现一级二级三级联动，当然了，多级也没有任何问题，但是在移动端，我建议最多到三级联动，否则的话影响用户体验感

1获取电脑网络ip地址（注意：手机端与电脑端需要在同一无限局域网下）
命令行中输入：ipconfig

回车后可以获取到ip地址：

3电脑将项目运行起来
4手机任意浏览器打开2552552400：8080地址

移动端自适应需要做适配，本文介绍vue-cli3+px2rem-loader+scss的配置

注意 ：amfe-flexible是lib-flexible的优化，主要区别是amfe-flexible不会改变视口大小

安装amfe-flexible和px2rem-loader:

在入口文件mainjs文件中引入amfe-flexible：

在indexhtml中修改meta：

在vueconfigjs中配置：

然后重启脚手架

《vue移动端h5适配解决方案（rem or vw）》
《vue-cli3+lib-flexible+postcss-px2rem+less》

---