vue input 正整数

项目场景：

在使用VUE框架的时候我们可能会要求input输入框只接收数字，并且为正整数，实现方式多种多样，这里主要记录两种解决方案

---

自定义指令

我们可以通过自定义指令来解决数据处理问题，以下方式直接可以适用于element的input标签上，将数据过滤为正整数且可以设置允许的最大值

        directives: {
            numberOnly: {
                bind: function (el, binding, vnode) {
                    el.handler = function () {
                        let ipts = el.getElementsByTagName("input");
                        let res = Number(ipts[0].value.replace(/\D+/, ''))
 					    vnode.context.pageForm2[binding.value.name] = res > binding.value.max ? binding.value.max : res
                    }
                    el.getElementsByTagName("input")[0].addEventListener('input', el.handler)
                },
                unbind: function (el) {
                    el.getElementsByTagName("input")[0].removeEventListener('input', el.handler)
                }
            }
        },

---

2、绑定input事件

绑定input事件，在input的值改变时立即进行数据处理，效果良好

 @input="dd = Number($event.target.value.replace(/\D+/, ''))"

---