vue 自定义指令input 只能输入正整数

мо仙堡杠把子灬

已于 2023-03-30 09:21:44 修改

阅读量4.7k

点赞数 3

分类专栏： vue 文章标签： vue 自定义指令做一个有知识的流氓

于 2020-05-09 13:44:50 首次发布

本文链接：https://blog.csdn.net/weixin_43553701/article/details/106017327

版权

vue 专栏收录该内容

62 篇文章 1 订阅

订阅专栏

昔有朝歌夜弦之高楼，上有倾城倾国之舞袖。

创建文件(自定义指令的文件)

import Vue from 'vue'
// 针对 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(/[^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)
}