使用vue自定义指令实现一个校验input只能输入数字和小数

可以通过自定义指令来限制输入框只能输入数字和小数，以下是一个实现的示例：

// 注册一个名为 number-only 的自定义指令
Vue.directive('number-only', {
  // 指令的定义
  bind: function (el, binding, vnode) {
    // 输入框的keypress事件，用于在输入时判断输入是否合法
    el.addEventListener('keypress', function (event) {
      // 防止非数字字符的输入，包括小数点和负号
      if (event.keyCode !== 46 && event.keyCode !== 45 && event.keyCode < 48 || event.keyCode > 57) {
        event.preventDefault();
      }
      // 限制只能输入一个小数点
      if (event.keyCode === 46 && el.value.indexOf('.') !== -1) {
        event.preventDefault();
      }
    });
    // 输入框的blur事件，用于在输入完成后格式化输入的数字
    el.addEventListener('blur', function (event) {
      // 将输入的内容转换成浮点数
      var value = parseFloat(el.value);
      // 如果输入不是数字，则清空输入框
      if (isNaN(value)) {
        el.value = '';
      } else {
        // 格式化输入的数字，保留两位小数
        el.value = value.toFixed(2);
      }
    });
  }
});

使用自定义指令时，只需要在需要限制输入的输入框上添加 `v-number-only` 属性即可：

<template>
  <div>
    <input type="text" v-number-only>
  </div>
</template>