javascript - Vue3 Cleave js fungerar inte om man inte använder v-model.lazy

För närvarande försöker jag använda cleavejs för att formatera tusentalsavgränsare i mitt inmatningsnummer, det visar konstigt beteende när jag skriver 1000.123, det visar 1,000.12 vilket är korrekt format, men mitt v-model värde är 1000.123 och inte 1000.12. Andra människor föreslår att använda v-model.lazy men det uppdateras bara när jag lämnar fokus från textinmatningen.

Finns det något annat sätt att lösa detta problem utan att använda v-model.lazy?

Detta är min nuvarande komponent

<script setup lang="ts">
import { ref, watch } from 'vue'
const props = withDefaults(defineProps<Props>(), {
  type: 'text',
  required: false,
  readonly: false,
  disabled: false
})
const inputValue = ref(props.modelValue)
const emit = defineEmits<{
  (e: 'update:modelValue', value: string | number): void
}>()

watch(
  () => props.modelValue,
  () => {
    inputValue.value = numeric.format(props.modelValue)
  },
  {
    immediate: true
  }
)

watch(
  inputValue,
  () => {
    emit('update:modelValue', parseFloat(inputValue.value.toString().replace(/(\d+),(?=\d+(\D|$))/g, '$1')))
  },
  {
    immediate: true
  }
)
</script>

<template>
 <input
        class="form-input"
        v-model.lazy="inputValue"
        v-cleave="{ numeral: true, numeralThousandsGroupStyle: 'thousand' }"
        :placeholder="props.placeholder"
        :required="props.required"
        :readonly="props.readonly"
        :disabled="props.disabled"
      />
</template>

Jag förväntar mig att v-model returnerar samma värde som cleavejs gjorde utan att använda .lazy

Svar #1

Först behöver du inte använda watch alls, och vi kommer inte att avge något på denna setter eftersom vi väntar på Cleavejs-händelsen

const inputValue = computed({
  set: (text: string) => {},
  get: () => new Intl.NumberFormat('en-US').format(props.modelValue)
})

För det andra, sänd rå värdedata från Cleavejs på onValueChanged-händelsen

const emit = defineEmits<{
  (e: 'update:modelValue', value: number): void
}>()

const onValueChanged = (e: any) => {
  emit('update:modelValue', Number(e.target.rawValue))
}

Senast, uppdatera din inmatningsdirektiv

v-cleave="{ numeral: true, numeralThousandsGroupStyle: 'thousand', onValueChanged: onValueChanged }"

Fullständigt komponentexempel

<script setup lang="ts">
import { computed } from 'vue'

export interface Props {
  modelValue: number
}

const props = withDefaults(defineProps<Props>(), {})

const inputValue = computed({
  set: (text: string) => {},
  get: () => new Intl.NumberFormat('en-US').format(props.modelValue)
})

const emit = defineEmits<{
  (e: 'update:modelValue', value: number): void
}>()

const onValueChanged = (e: any) => {
  emit('update:modelValue', Number(e.target.rawValue))
}
</script>

<template>
  <input
    v-cleave="{ numeral: true, numeralThousandsGroupStyle: 'thousand', onValueChanged: onValueChanged }"
    v-model="inputValue"
  />
</template>