vue-cropper 组件上下移动卡顿问题

vue-cropper 组件上下移动卡顿问题

---

前言

项目需求中是用 vant 跟 vue 结合使用进行使用，有个需求是用户上传自拍图片的需求，手机像素普遍比较大，拍的像素也很大，后台限制了图片大小，遇到上传图片过大问题，最后想了一下图片过大就引导用户进行图片裁剪，在查资料后决定使用 vue-cropper 组件进行使用，但是在使用过程中遇到了一个图片上下移动有卡顿，左右之后连续上下就很顺畅的问题，不知道是组件内部问题还是自己的使用冲突问题，百度查资料后在 vue-cropper 的 github 地址上有讨论过，有人提到了一个方式。后续有空再深究理解为啥会出现这个问题。
讨论地址: https://github.com/xyxiao001/vue-cropper/issues/316 

---

一、在 vue-cropper github讨论中为啥加了e.stopImmediatePropagation()会失效？

vue-cropper 引入基本都是通过 npm install 下载引入的，node_module 中 vue-cropper 的文件代码结构如下：

失效的问题大概是大家可能看到个 vue-cropper 组件就直接按照那意思在上面该吧，其实改了也没用，源代码还是旧的其实（我刚开始也这样哈哈哈哈~），最后发现姿势不对，后来查了资料之后得出结论，其实要看一下文件的package.json。

1.vue-cropper 的 package.json

其中最主要的是红框那句，main 文件是 dist 下的 index.js ，大家基本使用 es6 语法的，import “*” form “vue-cropper” 检查到 node_modules 下的 package.json ，会检索到 main 字段入口字段，就开始引入相应文件了。那我们这就看一下index.js 文件了。

2.dist 下 index.js 文件

文件结构是上图，经常使用 webpack 跟上面那个package.json中的文件的代码应该不难猜测出这个是 webpack 打包后的文件吧，所以我们直接改组件的方式是没有用的，那我们还需要将代码重新打包替换一下 index.js 才能生效吧。

二、使用步骤

1.复制代码

node_modules 下的 vue-cropper 文件新建一个文件

2.下载依赖

npm 一下， 命令 npm install

3.加代码

e.preventDefault() 跟 e.stopImmediatePropagation 是有其他区别的，前者阻止冒泡传递，同节点其他事件还可以执行，后者都不行了。可以查下资料哈。这里不多说啦。

4.打包

webpack 一下，命令：webpack

5.替换index.js

最后就是把刚生成的 index.js 项目文件中的 node_modules 下 vue-cropper/dist 的 index.js 文件就好啦。你们可以试下再加几个打印看看控制台会不会输出东西，试一下也没啥损失的。

总结

最后这个上下移动卡顿就这样解决了，感觉还是会有弊端的吧，毕竟人家作者应该是有考虑的，但是跟我目前的代码需求是不影响到，就有空再深究，学到了怎么改源码也是收货吧。继续写项目，还要去搞处理没接触的项目 Angluar 代码改动，还有 vue-cropper 代码作者牛。

vue-cropper Github 地址

vue-cropper