0
点赞
收藏
分享

微信扫一扫

vue使用directives V-指令限制输入框内容

在一些表单中输入框需要前端加入限制,比如需要用户输入的是非负数的整数,这时候我们可以使用v-指令只要在input里加上就行。不需要一个个的去校验,省去的校验的代码

<el-input-number v-model="typeModel.jyCheckNum" clearable  placeholder="请输入不合格数"   size="small"   v-enterNumber :controls="false"/>

和data同级

directives: {
        enterNumber: {
            inserted(el, binding, vnode, oldVnode) {
                el.addEventListener('keypress', function (e) {
                    e = e || window.event
                    let charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode
                    let re = /^[0-9]\d*$/
                    if (
                        !re.test(String.fromCharCode(charcode)) &&
                        charcode > 9 &&
                        !e.ctrlKey
                    ) {
                        if (e.preventDefault) {
                            e.preventDefault()
                        } else {
                            e.returnValue = false
                        }
                    }
                })
            },
        }
    },

举报

相关推荐

0 条评论