Skip to content

Add mobile event on input vicp-range #268

Open
@pasestars

Description

@pasestars

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions