vue使用directive限制表单输入整数、小数的方法

下面是详细讲解“vue使用directive限制表单输入整数、小数的方法”的完整攻略：

一、什么是directive

在Vue中，Directive(指令)是一种特殊的标记，它可以在模板中添加行为。在Vue中，有很多自带的directive，例如v-model、v-if、v-show等。通过使用Directive，开发者可以自定义自己的指令。Vue中，Directive定义了4个钩子函数，分别是bind、inserted、update和unbind。

二、限制表单输入整数

在Vue中使用Directive，通过定义Directive钩子函数，操作DOM元素，可以实现对表单输入的限制。下面是限制表单输入整数的Directive代码：

Vue.directive('number', {
    bind: function (el) {
        el.handler = function (evt) {
            if (!(evt.keyCode >= 48 && evt.keyCode <=57)) {
                evt.preventDefault();
            }
        };
        el.addEventListener('keyup', el.handler);
    },
    unbind: function (el) {
        el.removeEventListener('keyup', el.handler);
    }
});

代码中，Vue.directive函数用于定义Directive。其中，钩子函数bind表示Directive绑定在DOM上时执行的函数。在此函数中，我们使用DOM元素的addEventListener方法添加keyup事件监听器。当触发keyup事件时，判断输入内容的keyCode是否在数字范围，若不在范围内，则调用preventDefault()方法防止更改输入框的值。钩子函数unbind表示Directive解绑时执行的函数。在此函数中，我们使用DOM元素的removeEventListener方法移除keyup事件监听器。

在HTML中使用该Directive，只需添加v-number指令，如下所示：

<input type="text" v-number />

在这个例子中，只能输入整数。如果你想限制只能输入小数，可以按以下方法改变正则判断：

三、限制表单输入小数

基于上述代码，修改正则判断即可实现只能输入小数。下面是修改后的Directive代码：

Vue.directive('number', {
    bind: function (el) {
        el.handler = function (evt) {
            if (!(evt.keyCode >= 48 && evt.keyCode <=57 || evt.keyCode == 46)) {
                evt.preventDefault();
            }
            if (evt.keyCode == 46 && el.value.indexOf(".") >=0) {
                evt.preventDefault();
            }
        };
        el.addEventListener('keyup', el.handler);
    },
    unbind: function (el) {
        el.removeEventListener('keyup', el.handler);
    }
});

核心代码改变如下：

if (!(evt.keyCode >= 48 && evt.keyCode <=57 || evt.keyCode == 46)) {
    evt.preventDefault();
}
if (evt.keyCode == 46 && el.value.indexOf(".") >=0) {
    evt.preventDefault();
}

其中，修改第一个if语句，添加evt.keyCode == 46（即“.”）的判断，表示可以输入小数点。修改第二个if语句，添加el.value.indexOf(".") >= 0（即输入框已存在小数点）的判断，表示已经输入过小数点了，不能再次输入小数点。

在HTML中使用该Directive，只需添加v-number指令，如下所示：

<input type="text" v-number />

对于带有精度的小数输入，可以在Directive中自定义设置。比如下面的例子，限制输入的小数为保留2位小数：

Vue.directive('number', {
    bind: function (el, binding) {
        el.handler = function (evt) {
            var precision = 2;
            if (binding.value) {
                precision = binding.value.precision || 2;
            }
            var reg = new RegExp("^[0-9]+([.][0-9]{0," + precision + "})?$", "g");
            var value = el.value;
            if (!reg.test(value)) {
                el.value = value.slice(0, value.length - 1);
            }
        };
        el.addEventListener('input', el.handler);
    },
    unbind: function (el) {
        el.removeEventListener('input', el.handler);
    }
});

针对本例，需要在使用v-number指令的地方，添加v-number="{ precision: 2 }"，如下所示：

<input type="text" v-number="{ precision: 2 }" />

在这个例子中，只能输入小数位数不超过两位的数字。

以上是使用Directive限制表单输入整数、小数的方法。