deadcxap/liberama
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Доработка NumInput

Browse Source
This commit is contained in:
Book Pauk
2020-02-18 20:52:00 +07:00
parent ba4b3bd6b8
commit afe40b6a89
1 changed files with 32 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
client/components/share/NumInput.vue
View File

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