基于vue2.0的数字输入框指令

rookie_fly_sf

已于 2024-01-25 09:24:56 修改

阅读量642

点赞数 1

文章标签：前端 javascript vue.js 前端框架

于 2023-05-25 20:05:30 首次发布

本文链接：https://blog.csdn.net/qq_37873098/article/details/130874083

版权

本文介绍了一个基于Vue2.0的数字输入框指令的实现，详细阐述了需求，包括设置小数位数、符号输入、最值限制及边界处理策略，并提供了使用示例和源码解析。

摘要由CSDN通过智能技术生成

基于vue2.0的数字输入框指令`（v-number）`

在这里插入图片描述

需求如何

最近用到了数字输入框，需求需要满足：

设置输入的小数位数
设置是否支持输入符号
支持最值（最大值、最小值）
设置边界超出处理（1、超出是否替换成最值 2、超出最值无法进一步输入）

首先来看下配置属性有哪些：

max - 输入数字最大值
min - 输入数字最小值
digit - 设置小数位数
negative 是否支持输入符号
isReplace - 超出最值是采用替换成对应最值

如何使用

我们再来看下我们可以如何使用：

以下需求为 允许输入符号，允许输入最大值为 99999999，允许输入最小值为 -99999999，小数保留位数 2

<template>
  <div class="hello">
    <input type="text" v-number="{ negative: true, max: 99999999, min: -99999999 , digit:2 }">
  </div>
</template>

源码共享

我每行代码尽量写了注释，尽量的解释逻辑，下面来看下我们指令（number）的源码，指令名字我取为 number

export default {
   
  bind (el, binding) {
   
    // input 输入框 元素 兼容
    if (el.tagName !== 'INPUT') el = el.querySelector('input')
    // 记录旧值
    el.old = ''
    // 其它非法值进行处理 函数
    el.formatVal = function(newValue,is) {
   
      newValue = newValue.replace(/[^\d.]/, '')    // 首位 不是数字 或 小数点 就干掉
      newValue = newValue.replace(/^0+(\d)/, '$1') // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
      newValue = newValue