Доработка NumInput

This commit is contained in:
Book Pauk
2020-02-18 20:52:00 +07:00
parent ba4b3bd6b8
commit afe40b6a89

View File

@@ -10,23 +10,30 @@
<q-icon :class="(validate(value - step) ? '' : 'disable')"
name="la la-minus-circle"
class="button"
:v-ripple="validate(value - step)"
v-ripple="validate(value - step)"
@click="minus"
@mousedown.prevent.stop="onMouseDown($event, 'minus')"
@mouseup.prevent.stop="onMouseUp($event, 'minus')"
@mouseout.prevent.stop="onMouseUp($event, 'minus')"
@mouseup.prevent.stop="onMouseUp"
@mouseout.prevent.stop="onMouseUp"
@touchstart.stop="onTouchStart($event, 'minus')"
@touchend.stop="onTouchEnd"
@touchcancel.prevent.stop="onTouchEnd"
/>
</template>
<template v-slot:append>
<q-icon :class="(validate(value + step) ? '' : 'disable')"
name="la la-plus-circle"
class="button"
:v-ripple="validate(value + step)"
v-ripple="validate(value + step)"
@click="plus"
@mousedown.prevent.stop="onMouseDown($event, 'plus')"
@mouseup.prevent.stop="onMouseUp($event, 'plus')"
@mouseout.prevent.stop="onMouseUp($event, 'plus')"
@mouseup.prevent.stop="onMouseUp"
@mouseout.prevent.stop="onMouseUp"
@touchstart.stop="onTouchStart($event, 'plus')"
@touchend.stop="onTouchEnd"
@touchcancel.prevent.stop="onTouchEnd"
/>
{{ t }}
</template>
</q-input>
</template>
@@ -65,6 +72,7 @@ export default @Component({
class NumInput extends NumInputProps {
filteredValue = 0;
error = false;
t = '';
created() {
this.mask = '#'.repeat(this.max.toString().length);
@@ -117,9 +125,27 @@ class NumInput extends NumInputProps {
}
onMouseUp() {
if (this.inTouch)
return;
this.startClickRepeat = false;
this.clickRepeat = false;
}
onTouchStart(event, way) {
if (!this.$isMobileDevice)
return;
if (event.touches.length == 1) {
this.inTouch = true;
this.onMouseDown({button: 0}, way);
}
}
onTouchEnd() {
if (!this.$isMobileDevice)
return;
this.inTouch = false;
this.onMouseUp();
}
}
//-----------------------------------------------------------------------------
</script>