WIP Исправил ошибки ввода в числовой инпут
This commit is contained in:
@@ -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 }",
|
||||
: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>
|
||||
|
||||
@@ -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(
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -27,3 +27,6 @@ export function ruleDateValue(val, text) {
|
||||
false
|
||||
);
|
||||
}
|
||||
export function ruleNumberInput(val, max, min, text) {
|
||||
return (val <= max && val >= min) || text || false;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user