<input type="text" oninput="limitDecimal(this)"> 用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 type="text" v-limit-decimal />
  </div>
</template>

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

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

需要注意，在 Vue3 中，自定义指令的用法与 Vue2 有所不同，需要在组件中通过 `directives` 属性来注册指令，并且指令的名称不需要加上 `v-` 前缀。