input框替换，只让输入数字，小数点

input 只能输入正整数 和小数点，小数点限制一位。

<input  oninput="value=value.replace(/[^\d.]/g,'')
							.replace(/\.{2,}/g,'.')
							.replace(/^\./g,'')"  
							/>

• .replace(/[^\d.]/g,‘’) 非数字型的转换为空
• .replace(/.{2,}/g,‘.’) 连续小数点替换成一个 如：1...2 => 1.2
• .replace(/^./g,‘’) 以. 开头的替换'' 如：.42 => 42
• .replace(/(…*)./g, ‘$1’) 只保留第一个小数点删除后面的
• .replace(/(…*)./g, ‘’) 小数点转换为空 如：12. => 12

main.ts
import { installDirective } from "./utils/directive";
const app = createApp(App);
installDirective(app);


directive.ts
import type { App } from "vue";
// 导入 Vue 的 App 类型，用于类型标注

export const installDirective = (app: App) => {
  // 导出一个安装函数，接收 Vue 应用实例作为参数
  app.directive("number-input", {
    // 注册一个名为 "number-input" 的自定义指令
    mounted(el) {
      // 指令挂载到元素时的生命周期钩子
      el.addEventListener("input", e => {
        // 为元素添加 input 事件监听器
        let val = e.target.value
          .replace(/[^\d.]/g, "")      // 第一步：移除非数字和非小数点字符
          .replace(/\.{2,}/g, ".")     // 第二步：将连续多个小数点替换为单个小数点
          .replace(/^\./, "")          // 第三步：移除开头的小数点
          .replace(/(\..*)\./g, "$1"); // 第四步：防止输入多个小数点（保留第一个）

        // 避免死循环：值没变化就不继续触发
        if (val !== e.target.value) {
          e.target.value = val; // 更新输入框的值
          // 手动触发 input，让 v-model 同步
          e.target.dispatchEvent(new Event("input"));
        }
      });
    },
  });
};


使用  <input  v-number-input />