github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Slider: add touch events support (#9320)

pull/10034/head
Vladislav Sevostyanov 2018-03-06 06:27:34 +03:00 committed by 杨奕
parent ed5892b933
commit 737ef71262
1 changed files with 13 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/slider/src/button.vue
View File

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