vue通过指令限制input输入框只能输入数字,通过修饰符控制可限制仅输入正数、小数点位数、自动补零

一、效果

二、指令封装

js 复制代码
/**
 * 使用 v-only-number.positive.full="3"
 * 
 *    ="3" 表示允许输入小数,小数位数最多3位,默认为0
 *    positive 表示只能输入正数
 *    full 表示自动补零。前提是允许输入小数,否则不要写full修饰符
 * 
 */

Vue.directive('only-number', {
  bind: function (el, {
    value = 0,
    modifiers
  }) {
    el = el.nodeName == "INPUT" ? el : el.children[0]
    const RegStr = value == 0 ? `^[\\+\\-]?\\d+\\d{0,0}` : `^[\\+\\-]?\\d+\\.?\\d{0,${value}}`;
    el.addEventListener('keyup', function () {
      if (el.value != '-') {
        el.value = el.value.match(new RegExp(RegStr, 'g'));
        if (modifiers.positive) {
          el.value = el.value.replace('-', '')
        }
        el.dispatchEvent(new Event('input'))
      }
    })
    el.addEventListener('blur', function () {
      let num = el.value.match(new RegExp(RegStr, 'g')) || '0.00';
      // 自动补零
      if (modifiers.fill) {
        let str = num.toString()
        let decimalPosition = str.indexOf('.')
        if (decimalPosition < 0) {
          decimalPosition = str.length
          str += '.'
        }
        while (str.length <= (decimalPosition + Number(value))) {
          str += '0'
        }
        num = str
        el.value = num
      }
      if (modifiers.positive) {
        el.value = el.value.replace('-', '')
      }
      el.dispatchEvent(new Event('input'))
    })
  }
})

三、使用

js 复制代码
<el-input v-model="inputValue" v-only-number.fill.positive="3" clearable></el-input>
相关推荐
爱分享的程序员2 分钟前
前端面试专栏-算法篇:17. 排序算法
前端·javascript·node.js
lichenyang4532 分钟前
react案例动态表单(受控组件)
前端
Jackson_Mseven3 分钟前
面试官:useEffect 为什么总背刺?我:闭包、ref 和依赖数组的三角恋
前端·react.js·面试
哎呦你好20 分钟前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
盛夏绽放29 分钟前
接口验证机制在Token认证中的关键作用与优化实践
前端·node.js·有问必答
zhangxingchao1 小时前
Jetpack Compose 之 Modifier(中)
前端
JarvanMo1 小时前
理解 Flutter 中 GoRouter 的context.push与context.go
前端
pe7er1 小时前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
星始流年1 小时前
前端视角下认识AI Agent
前端·agent·ai编程
pe7er1 小时前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js