WIP Исправил ошибки ввода в числовой инпут

This commit is contained in:
DwCay
2023-05-22 17:17:00 +03:00
parent a65fac1056
commit 6cdd327bab
4 changed files with 46 additions and 25 deletions

View File

@@ -1,21 +1,22 @@
<template lang="pug">
base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
q-input(
ref="numberInput"
v-model="value",
:name="name",
:multiple="multiple"
:multiple="multiple",
:class="{'circle': circle, 'font-input': true, 'doc': doc}",
:input-style="{ color: textColor, borderColor: borderColor, resize: resize}",
:input-style="{ color: textColor, borderColor: borderColor, resize: resize }",
:borderless="borderless",
:placeholder="placeholder",
:outlined="outlined",
:dense="dense",
:type="type",
type="number",
:readonly="readonly",
:disable="disabled",
:filled="filled",
:bg-color="filled || standout ? '' : 'white'",
:rules="rule",
:rules="rule || ruleNumberInput",
:lazy-rules="lazyRule",
:item-aligned="itemAligned",
:no-error-icon="noErrorIcon",
@@ -25,7 +26,7 @@
:square="square",
:standout="standout"
:accept="accept",
:debounce="debounce",
:debounce="null",
:shadow-text="shadowText"
hide-bottom-space
)
@@ -48,16 +49,16 @@
<script>
import BaseInput from "@/components/base/BaseInput";
import { v_model } from "@/shared/mixins/v-model";
import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
import { ruleNumberInput } from "@/shared/utils/rulesInputs";
export default {
name: "BaseInputNumber",
components: { BaseInput, BaseInputContainer },
mixins: [v_model],
data() {
return {
intervalId: 0,
ruleNumberInput: [(val) => ruleNumberInput(val, this.max, this.min)],
};
},
props: {
@@ -101,9 +102,6 @@ export default {
type: Boolean,
default: false,
},
type: {
default: "text",
},
standout: {
type: [Boolean, String],
default: false,
@@ -124,10 +122,13 @@ export default {
textColor: String,
borderColor: String,
rule: Array,
lazyRule: [Boolean, String],
noErrorIcon: Boolean,
lazyRule: String,
noErrorIcon: {
type: Boolean,
default: true,
},
itemAligned: Boolean,
modelValue: [String, Date, Number],
modelValue: [Number],
placeholder: String,
disabled: Boolean,
label: String,
@@ -135,26 +136,29 @@ export default {
iconLeft: Boolean,
name: String,
},
emits: ["update:modelValue"],
methods: {
increment() {
if (this.value < this.max) {
this.value = Number.parseFloat(Number(this.value) + this.step).toFixed(
this.rounding
if (this.modelValue < this.max) {
this.$emit(
"update:modelValue",
Number((this.modelValue + this.step).toFixed(this.rounding))
);
} else {
if (this.reverseValue) {
this.value = this.min;
this.$emit("update:modelValue", this.min);
}
}
},
decrement() {
if (this.min < this.value) {
this.value = Number.parseFloat(this.value - this.step).toFixed(
this.rounding
if (this.min < this.modelValue) {
this.$emit(
"update:modelValue",
Number((this.modelValue - this.step).toFixed(this.rounding))
);
} else {
if (this.reverseValue) {
this.value = this.max;
this.$emit("update:modelValue", this.max);
}
}
},
@@ -168,7 +172,20 @@ export default {
clearInterval(this.intervalId);
},
},
watch: {
value(val) {
this.value = Number(val).toFixed(this.rounding);
},
},
computed: {
value: {
get() {
return this.modelValue ? this.modelValue : 0;
},
set(value) {
this.$emit("update:modelValue", Number(value));
},
},
rounding() {
return String(this.step).split(".")[1]?.length || 0;
},
@@ -180,6 +197,8 @@ export default {
.q-field .q-field__control-container
display: flex
align-items: center
input[type=number]::-webkit-inner-spin-button
-webkit-appearance: none
</style>
<style lang="sass" scoped>

View File

@@ -19,7 +19,6 @@
outlined,
:shadow-text="data.config[key].shadowText",
:placeholder="`0${data.config[key].shadowText}`"
mask="###"
)
.flex.flex-col.gap-y-2.w-full(v-if="data.key === 'thermometry'")
base-input.w-full(

View File

@@ -819,8 +819,8 @@ export const protocolForms = [
title: "Реакция на холод",
label: "Температура",
shadowText: "º",
max: 100,
min: 1,
max: 25,
min: -40,
color: "var(--font-cold-color)",
bg: "var(--bg-cold-color)",
icon: "ac_unit",
@@ -833,7 +833,7 @@ export const protocolForms = [
label: "Температура",
shadowText: "º",
max: 100,
min: 1,
min: 45,
color: "var(--font-heat-color)",
bg: "var(--bg-heat-color)",
icon: "local_fire_department",

View File

@@ -27,3 +27,6 @@ export function ruleDateValue(val, text) {
false
);
}
export function ruleNumberInput(val, max, min, text) {
return (val <= max && val >= min) || text || false;
}