vue-image-crop-upload icon indicating copy to clipboard operation
vue-image-crop-upload copied to clipboard

Add mobile event on input vicp-range

Open pasestars opened this issue 2 years ago • 1 comments
trafficstars

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] 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.

pasestars avatar Jan 05 '23 07:01 pasestars

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...?

lupinitylabs avatar Feb 11 '23 04:02 lupinitylabs