dai-siki / vue-image-crop-upload

A beautiful vue component for image cropping and uploading. (vue图片剪裁上传组件)
https://dai-siki.github.io/vue-image-crop-upload/example-2/demo.html
2.09k stars 367 forks source link

Add mobile event on input vicp-range #268

Open pasestars opened 1 year ago

pasestars commented 1 year ago

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch vue-image-crop-upload@3.0.3 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/vue-image-crop-upload/upload-3.vue b/node_modules/vue-image-crop-upload/upload-3.vue
index 2f20c30..e78d952 100644
--- a/node_modules/vue-image-crop-upload/upload-3.vue
+++ b/node_modules/vue-image-crop-upload/upload-3.vue
@@ -50,9 +50,9 @@
                    </div>

                    <div class="vicp-range">
-                       <input type="range" v-model="scale.range" step="1" min="0" max="100" @mousemove="zoomChange">
-                       <i @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub" class="vicp-icon5"></i>
-                       <i @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd" class="vicp-icon6"></i>
+                       <input type="range" v-model="scale.range" step="1" min="0" max="100" @mousemove="zoomChange" @touchmove="zoomChange" @touchend="zoomChange">
+                       <i @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub" @touchstart="startZoomSub" @touchmove="endZoomSub" @touchend="endZoomSub" class="vicp-icon5"></i>
+                       <i @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd" @touchstart="startZoomAdd" @touchmove="endZoomAdd" @touchend="endZoomAdd" class="vicp-icon6"></i>
                    </div>

                    <div class="vicp-rotate" v-if="!noRotate">

This issue body was partially generated by patch-package.

lupinitylabs commented 1 year ago

It is also possible to just use the @input in place of the @mousemove, worked for me on both desktop and mobile, in both Webkit and Firefox. I would contribute a PR, but I have my doubts this project is still actively supported...?