无法限制类星体输入值类型数量

Question

为什么按钮单击有效，但在脚本中却不起作用

感谢您的支持

我还使用了watch和@update模型：吊顶日志湖表面值切片中的值和所有warks都很好，但在模板中输入值可以超过3个字符

<q-input
            v-model="lakeSurface"
            type="number"
            class="q-pa-none field-36 col-4"
            color="primary" bg-color="grey-3"
            borderless
            dense
            lazy-rules="ondemand"
            :label="$t('areaMtwo')"
            no-error-icon
            :rules="[(val: string | null) => val ? !!val.trim() : '']"
            :max="5"
            :min="0"
          />

    const restrictInputValue = () => {
      if (lakeSurface.value && lakeSurface.value.toString().length > 3) {
        lakeSurface.value = +lakeSurface.value.toString().slice(0, 3);
      }
    };

Answer 1

      <q-input
        v-model="lakeSurface"
        @update:modelValue="restrictInputValue"
        type="text"
        class="q-pa-none field-36 col-4"
        color="primary" bg-color="grey-3"
        borderless
        dense
        lazy-rules="ondemand"
        :label="$t('areaMtwo')"
        no-error-icon
        :rules="[(val: string | null) => val ? !!val.trim() : '']"
      />

  const restrictInputValue = () => {
  if (!lakeSurface.value) return;

  if (!/^\d{1,18}(\.\d{0,2})?$/.test(lakeSurface.value)) {
    lakeSurface.value = lakeSurface.value.slice(0, -1);
  }
};

自定义正则表达式验证帮助了我。这个逻辑允许我输入 18 个带点的符号，然后再输入 2 个字符。