diff --git a/package.json b/package.json index 0daf73d..f5decbb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-three-d-mockup", - "version": "0.2.0", + "version": "0.2.1", "description": "📱 A 3D phone mockup component to showcase your apps", "author": "Anatoly Kopyl ", "keywords": ["vue", "mockup-generator", "threejs", "design", "mockup"], diff --git a/src/Mockup.vue b/src/Mockup.vue index 11da72c..97abfb8 100644 --- a/src/Mockup.vue +++ b/src/Mockup.vue @@ -4,6 +4,10 @@ @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" @mousemove="handleMouseMove" + + @touchstart="handleMouseEnter" + @touchend="handleMouseLeave" + @touchmove="handleTouchMove" /> @@ -235,6 +239,13 @@ export default { mouseY = -(event.clientY - rect.top - rect.height / 2); } + function handleTouchMove(event) { + event.preventDefault(); + const rect = container.value.getBoundingClientRect(); + mouseX = event.touches[0].clientX - rect.left - rect.width / 2; + mouseY = -(event.touches[0].clientY - rect.top - rect.height / 2); + } + onMounted(() => { init(); animate(0); @@ -245,6 +256,7 @@ export default { handleMouseEnter, handleMouseLeave, handleMouseMove, + handleTouchMove, }; }, };