vue3的elementPlus中使用el-input控制用户输入正确金额，el-input-number遇到的一系列问题

在Vue 3中使用Element Plus的el-input组件来控制用户输入正确的金额，可以通过监听input事件或使用v-model.lazy来实现。为了确保输入的是正确的金额格式，你可以使用input的@input事件或者watch来监听v-model绑定的值的变化，并对其进行格式化处理。

以下是一个简单的例子，展示如何使用el-input组件来控制金额输入：

<template>
  <el-input
    v-model="amount"
    @input="formatAmount"
    placeholder="请输入金额"
  ></el-input>
</template>
 
<script setup>
import { ref } from 'vue';
 
const amount = ref('');
 
function formatAmount(value) {
  // 这里简单处理，仅允许数字和小数点
  // 你可以根据需要添加更多的格式验证和处理逻辑
  value = value.replace(/[^\d.]/g, '')
    .replace(/\.{2,}/g, '.')
    .replace('.', '$#$')
    .replace(/\./g, '')
    .replace('$#$', '.')
    .replace(/^(\-)*(\d+)\.(\d{2}).*$/, '$1$2.$3');
 
  if (value.indexOf('.') < 0 && value !== '') {
    // 也可以处理没有小数点的情况
    value += '.00';
  }
  if (value.indexOf('.') === value.length - 2) {
    // 如果小数点后只有一位数字，补充一个0
    value += '0';
  }
  if (value.indexOf('.') > 0) {
    // 保留两位小数
    value = value.slice(0, value.indexOf('.') + 3);
  }
 
  return (amount.value = value);
}
</script>

在这个例子中，我们使用了el-input组件的@input事件来监听用户的输入，并调用formatAmount函数来格式化输入的金额。formatAmount函数会处理用户的输入，以确保它是一个正确的金额格式（两位小数）。如果用户输入了错误的格式，例如多余的小数点或字母，这个函数会自动修正输入值。