输入格式（掩码），如 vue 指令

Question

当我输入这样的输入时，我需要一个行为：

1. 只有数字可以输入
2. 输入的最后两位数字与前面的数字用点隔开

例如：键盘输入“5” - 显示在输入“0.05”中。键盘输入“1005” - 显示在输入“10.05”中。

这就是我现在拥有的：

Vue.directive('format', {
  bind(el: HTMLElement, binding: any, vnode: VNode) {
    const { modifiers } = binding;
    const targetElement = el;

    if (modifiers.cost) {
      targetElement.addEventListener('input', (e: any) => {
        e.target.value = e.target.value.replace(/[^0-9]/g, '');
      });
    }
  },
  update(el: HTMLElement, binding: any, vnode: VNode) {
    const { modifiers } = binding;
    const targetElement = el;

    if (modifiers.cost) {
      targetElement.addEventListener('input', (e: any) => {
        e.target.value = e.target.value.replace(/[^0-9]/g, '');
      });
    }
  },
});

非常感谢您的帮助。

Answer 1

1. 您可以在“input”标签中指定type="number"。它只会接受数字。您还可以对接受的数字设置限制。像这样：

2. 使用来自 Vue 的 filter。在你的 Vue 实例中

.

new Vue({
    ...
    filters: {
        addDot(number) {
            return number / 100
        }
    },
    //your other properties
})

然后在输入标签中：

<input type="number" min="0" :value="inputNumber | addDot" />

确保在您的数据属性中有变量inputNumber，这基本上是您存储输入值的地方