input输入框自定义指令只允许输入数字

时间路人e

已于 2024-09-24 16:30:52 修改

阅读量150

点赞数 2

文章标签： vue.js javascript 前端

于 2024-08-22 11:40:44 首次发布

本文链接：https://blog.csdn.net/weixin_50748620/article/details/141424206

版权


import Vue from 'vue'
/**
 * @param {*} input 只允许输入数字指令
 */
Vue.directive('integer-only', {
  inserted (el) {
    const obj = el.querySelectorAll('.el-input__inner,.el-textarea__inner')[0]
    el.addEventListener('input', event => {
      const value = event.target.value
      event.target.value = value.replace(/\D/g, '') // 只保留数字
    })
    // 触发更新v-model
    obj.dispatchEvent(new Event('input'))
  }
})