vue3+elementui 数字输入框转千分位展示

在Vue 3和Element UI中，可以通过创建一个自定义组件来实现数字输入框的千分位格式化。以下是一个简单的示例：

1. 创建一个新的Vue组件NumberInput.vue：

<template>
  <el-input
    v-model="inputValue"
    @input="formatNumber"
    @change="handleChange"
  ></el-input>
</template>
 
<script setup>
import { ref, watch } from 'vue';
import { isNaN } from 'lodash-es';
 
const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: '',
  },
});
 
const emit = defineEmits(['update:modelValue']);
 
const inputValue = ref(formatNumberForDisplay(props.modelValue));
 
function formatNumberForDisplay(value) {
  return new Intl.NumberFormat('zh-CN').format(value);
}
 
function formatNumber(value) {
  const numericValue = value.replace(/\D/g, '');
  inputValue.value = formatNumberForDisplay(numericValue);
}
 
function handleChange(value) {
  const numericValue = value.replace(/,/g, '');
  emit('update:modelValue', numericValue);
}
 
watch(() => props.modelValue, (newValue) => {
  inputValue.value = formatNumberForDisplay(newValue);
});
</script>

2. 在父组件中使用这个自定义组件：

<template>
  <NumberInput v-model="number" />
</template>
 
<script setup>
import { ref } from 'vue';
import NumberInput from './NumberInput.vue';
 
const number = ref(123456789);
</script>

这个组件会将传递给它的数字模型值格式化为千分位显示，并在输入时去除非数字字符。当输入框失去焦点时，它会发出一个格式化后的数值。