function limitDecimal(obj) { // 清除"数字"和"."以外的字符 obj.value = obj.value.replace(/[^\d.]/g, ""); // 验证第一个字符是数字 obj.value = obj.value.replace(/^\./g, ""); // 只保留第一个小数点，清除多余的 obj.value = obj.value.replace(/\.{2,}/g, "."); obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); // 只能输入两个小数 obj.value = obj.value.replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3');} 封装到util里 用vue3.0

可以将该函数封装到 Vue3 的自定义指令中，代码如下：

import { Directive } from 'vue';

const limitDecimalDirective: Directive = {
  mounted(el) {
    el.addEventListener('input', function(event) {
      const target = event.target as HTMLInputElement;
      target.value = target.value.replace(/[^\d.]/g, '')
        .replace(/^\./g, '')
        .replace(/\.{2,}/g, '.')
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
        .replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
    });
  }
};

export default limitDecimalDirective;

然后在 Vue3 的组件中使用该指令即可：

<template>
  <div>
    <input v-limit-decimal />
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import limitDecimalDirective from '@/utils/limitDecimalDirective';

export default defineComponent({
  directives: {
    limitDecimal: limitDecimalDirective
  }
});
</script>

注意，为了能够正确地获取并修改输入框的值，需要在指令的方法中使用 `addEventListener` 监听 `input` 事件，而不能直接使用 `el.value`。另外，为了避免与其他指令或组件的命名冲突，可以将该指令命名为 `limitDecimal`。