阅读 2023

Vue自定义指令实现input限制输入正整数

前言

种一棵树最好的时间是十年前,其次是现在。--谁说的不重要。

明确需求

在做表单时,我们经常会遇到各种input输入框,例如在设计填写个数时,要求输入正整数。

普通实现

如果只是个别输入框,那么我们完全可以检测input的keyup事件,在该事件里对keyup事件进行操作即可

    <input type="text" v-model="value" 
    @keyup="value = value.length === 1 ? value.replace(/[^1-9]/g, '') : value.replace(/\D/g, '')" />
复制代码

如果存在大量的要求输入正整数,那就不好玩了

高级实现

最终效果

粉墨登场!

首先看下最终结果:

<input type="text" v-model="value" v-Int/>
复制代码

确认过的眼神,简单到只需要添加指令 v-Int即可实现,是不是心动的感觉?

实现方式

  1. 新建JS文件,代码如下

2. 注册自定义指令,在main.js文件中引入文件,并注册(图中标注两行代码即可)
3. 起飞,在需要的地方输入框使用该指令即可轻松实现。

结语

如果把自己常用的小技能都采用自定义的方式进行维护,那岂不是美滋滋。

修正

用了一段时间后,发现一个,input的值被修改了,但vue里显示的还是旧值(例如输入字母时失去焦点,值竟然没有发生改变),这是个严重的bug呀...于是花了一上午找原因...找到解决方法:

import Vue from 'vue'
export default () => {
  // 针对 el-input做的限制,只能输入正整数
  Vue.directive('Int', {
    bind: function (el) {
      const input = el.getElementsByTagName('input')[0]
      input.onkeyup = function (e) {
        if (input.value.length === 1) {
          input.value = input.value.replace(/[^1-9]/g, '')
        } else {
          input.value = input.value.replace(/[^\d]/g, '')
        }
        trigger(input, 'input')
      }
      input.onblur = function (e) {
        if (input.value.length === 1) {
          input.value = input.value.replace(/[^1-9]/g, '')
        } else {
          input.value = input.value.replace(/[^\d]/g, '')
        }
        trigger(input, 'input')
      }
    }

  })
}
/*********************************
  ** Fn: trigger
  ** Intro: 参考 https://github.com/vuejs/Discussion/issues/157#issuecomment-273301588
  ** Author: zyx
*********************************/
const trigger = (el, type) => {
  const e = document.createEvent('HTMLEvents')
  e.initEvent(type, true, true)
  el.dispatchEvent(e)
}

复制代码

到这里bug已经修复了。 该bug解决方法参考自:github.com/vuejs/Discu…

关注下面的标签,发现更多相似文章
评论