vue3整数指令，即拿即用

1、创建ts文件 

import type { Directive } from "vue";
/**
  自定义输入限制指令，提供多种输入模式：
* 1、默认模式：只能输入0和正整数，使用：<el-input v-int />
* 2、小数模式：只能输入0和小数，使用：<el-input v-int="'decimal'" />
* 3、正整数模式：只能输入正整数，使用：<el-input v-intr="'positiveInteger'" />
* 4、大于0小数模式：只能输入大于0的小数，使用：<el-input  v-int="'positiveDecimal'" />
  使用方法：在 v-int 后面传递对应的模式参数。
*/
const int: Directive = {
  mounted(el, binding) {
    const { value } = binding;
    el.addEventListener("input", event => {
      event.preventDefault(); // 阻止默认输入行为
      const inputValue = event.target.value;
      switch (value) {
        case "decimal":
        case "positiveDecimal":
          event.target.value = inputValue.replace(/[^0-9.]|(\..*)\./g, "$1");
          break;
        default:
          event.target.value = inputValue.replace(/[^\d]/g, "");
          break;
      }
      if (
        ["positiveInteger", "positiveDecimal"].includes(value) &&
        Number(inputValue) === 0
      ) {
        event.target.value = "";
      }
    });
  }
};

export default int;

2、引入

import int from "@/directives/int/index";
const vInt = int;

3、使用

 <el-input
  v-model="data"
  v-int
/>