• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

vue中设置input输入框的值为正整数,不能为负数和小数

开发技术 开发技术 2周前 (04-30) 6次浏览

一、新建文件夹

vue中设置input输入框的值为正整数,不能为负数和小数

 

 二、int.js中新增自定义指令

vue中设置input输入框的值为正整数,不能为负数和小数

 

 代码如下:

import Vue from ‘vue’
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(/[^0-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(/[^0-9]/g, ”)
      } else {
        input.value = input.value.replace(/[^d]/g, ”)
      }
      trigger(input, ‘input’)
    }
  }
})
const trigger = (el, type) => {
  const e = document.createEvent(‘HTMLEvents’)
  e.initEvent(type, true, true)
  el.dispatchEvent(e)
}
三、在main.js中引入自定义指令的文件
vue中设置input输入框的值为正整数,不能为负数和小数

 

 四、在组件中使用自定义指令

vue中设置input输入框的值为正整数,不能为负数和小数

 

 完。。。。。。。。。。


喜欢 (0)