输入框的值和绑定的值不一样，自定义input指令，限制输入框输入长度，小数位，最大值

在Vue.js中，如果你遇到输入框的值和绑定的数据模型不一致的情况，通常是因为你正在使用自定义的`v-model`指令，并对输入内容进行了验证或者格式化处理。例如，你可以创建一个名为`customInput`的自定义指令，它会包含如下的功能：

1. **值限制**：通过监听用户输入事件（`input`），检查当前输入的字符长度，如果超过设定的最大长度，可以阻止提交或者自动截断。

export default {
  directives: {
    customInput: {
      bind(el, binding, vnode) {
        el.addEventListener('input', (event) => {
          const value = event.target.value;
          if (value.length > binding.value.maxLength) {
            event.target.value = value.slice(0, binding.value.maxLength);
          }
        });
      },
      update(el, binding) {
        // 更新限制规则或其他配置
      }
    }
  }
}

2. **小数位限制**：对于数字输入，可以使用正则表达式检查并限制小数点后的位数，例如只允许两位小数。

function checkDecimalPlaces(value, maxDecimalPlaces) {
  const regex = /^\d+(\.\d{1,${maxDecimalPlaces}})?$/;
  return regex.test(value);
}

el.addEventListener('input', (event) => {
  const value = parseFloat(event.target.value);
  if (!checkDecimalPlaces(value, binding.value.maxDecimalPlaces)) {
    event.target.value = value.toFixed(binding.value.maxDecimalPlaces);
  }
});

3. **最大值约束**：同样可以在输入时检查是否超过了设定的最大值，如果是，则清空输入或设置为最大值。

if (Number(value) > binding.value.maxValue) {
  event.target.value = binding.value.maxValue;
}