diff --git a/packages/slider/src/button.vue b/packages/slider/src/button.vue index d8926f199..4cb6e03e6 100644 --- a/packages/slider/src/button.vue +++ b/packages/slider/src/button.vue @@ -4,6 +4,7 @@ @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" @mousedown="onButtonDown" + @touchstart="onButtonDown" :class="{ 'hover': hovering, 'dragging': dragging }" :style="wrapperStyle" ref="button" @@ -135,7 +136,9 @@ event.preventDefault(); this.onDragStart(event); window.addEventListener('mousemove', this.onDragging); + window.addEventListener('touchmove', this.onDragging); window.addEventListener('mouseup', this.onDragEnd); + window.addEventListener('touchend', this.onDragEnd); window.addEventListener('contextmenu', this.onDragEnd); }, onLeftKeyDown() { @@ -151,6 +154,10 @@ onDragStart(event) { this.dragging = true; this.isClick = true; + if (event.type === 'touchstart') { + event.clientY = event.touches[0].clientY; + event.clientX = event.touches[0].clientX; + } if (this.vertical) { this.startY = event.clientY; } else { @@ -166,6 +173,10 @@ this.displayTooltip(); this.$parent.resetSize(); let diff = 0; + if (event.type === 'touchmove') { + event.clientY = event.touches[0].clientY; + event.clientX = event.touches[0].clientX; + } if (this.vertical) { this.currentY = event.clientY; diff = (this.startY - this.currentY) / this.$parent.sliderSize * 100; @@ -193,7 +204,9 @@ } }, 0); window.removeEventListener('mousemove', this.onDragging); + window.removeEventListener('touchmove', this.onDragging); window.removeEventListener('mouseup', this.onDragEnd); + window.removeEventListener('touchend', this.onDragEnd); window.removeEventListener('contextmenu', this.onDragEnd); } },