javascript - 如果不使用 v-model.lazy，Vue3 Cleave js 将无法工作

Question

目前，我尝试使用 cleavejs 来格式化我的输入数字的千位分隔符，当我输入 1000.123 时，它显示出奇怪的行为，它显示 1,000.12 这是正确的格式，但我的 v-model 值是 1000.123 而不是 1000.12。其他人建议使用 v-model.lazy 但它仅在我将焦点从输入文本中移开时更新。

有没有其他方法可以在不使用 v-model.lazy 的情况下解决这个问题？

这是我当前的组件

<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>

我希望 v-model 返回与 cleavejs 不使用 .lazy 时相同的值

Answer 1

首先，您根本不需要使用 watch，并且我们不会在此 setter 上发出信号，因为我们等待 Cleavejs 事件

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

其次，从 Cleavejs onValueChanged 事件发出原始值数据

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

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

最后，更新您的输入指令

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

完整组件示例

<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>