首页 > 其他分享 >Vue2.0新手教程:如何轻松实现数字输入框指令?

Vue2.0新手教程:如何轻松实现数字输入框指令?

时间:2024-01-26 15:31:23浏览次数:33  
标签:el digit value 输入框 最值 Vue2.0 新手 newValue 输入

前言

前端项目中,输入框是常见的,数字输入框更是常见,我们也许用惯了UI框架或是第三方提供的数字输入框,其实我们内心也想拥有自己的一个数字输入框指令,进可以(灵活使用),退可以守(灵活扩展),一切尽在掌握之中,不尽于被动。

需求

最近用到了 数字输入框,需求需要满足:

  1. 设置输入的小数位数
  2. 设置是否支持输入符号
  3. 支持最值(最大值、最小值)
  4. 设置边界超出处理 (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>

源码及示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue2 数字输入框指令</title>
</head>
<body>
    <div id="app">
        <div class="item">
            <div class="desc">
                默认状态
                <ul>
                    <li>输入的小数位数digit:2</li>
                    <li>输入数字最大值max:无限制</li>
                    <li>输入数字最小值min:无限制</li>
                    <li>是否允许输入负号negative:不允许</li>
                    <li>超出最值 是否允许采用替换成对应最值isReplace:不允许</li>
                </ul>
            </div>
            <div class="input-wrap"><input type="text" v-number></div>
        </div>
        <div class="item">
            <div class="desc">
                自定义状态1
                <ul>
                    <li>输入的小数位数digit:0</li>
                    <li>输入数字最大值max:999</li>
                    <li>输入数字最小值min:-999</li>
                    <li>是否允许输入负号negative:允许</li>
                    <li>超出最值 是否允许采用替换成对应最值isReplace:允许</li>
                </ul>
            </div>
            <div class="input-wrap"><input type="text" v-number="{digit:0,min:-999,max:999,negative:true,isReplace:true}"></div>
        </div>
        <div class="item">
            <div class="desc">
                自定义状态2
                <ul>
                    <li>输入的小数位数digit:0</li>
                    <li>输入数字最大值max:999</li>
                    <li>输入数字最小值min:0</li>
                    <li>是否允许输入负号negative:不允许</li>
                    <li>超出最值 是否允许采用替换成对应最值isReplace:不允许</li>
                </ul>
            </div>
            <div class="input-wrap"><input type="text" v-number="{digit:0,min:-999,max:999,negative:false,isReplace:false}"></div>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    /**
     * 
        数字输入框,需求满足:

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

        配置属性:

        max - 输入数字最大值
        min - 输入数字最小值
        digit - 设置小数位数
        negative 是否支持输入符号
        isReplace - 超出最值 是采用替换成对应最值
     * 
     * 
     */
    new Vue({
        el:'#app',
        data:{
        },
        directives:{
            number: {
                bind (el, binding) {
                     // input 输入框 元素 兼容
                    if (el.tagName !== 'INPUT') el = el.querySelector('input')
                    el.old = '' // 记录旧值
                    el.handler = function () {
                        if(el.lock)return
                        const { max, digit, min, negative, isReplace } = binding.value || {}
                         // 小数位数正则
                        const digitReg = new RegExp(`^\\d*(\\.?\\d{0,${digit === undefined ? 2 : digit}})`, 'g')
                        // 最新值是否是负数
                        const isNegative  = el.value.includes('-')
                        // 最新的输入框内的值
                        const val = el.value
                         // 其它非法值进行处理
                        let newValue = el.value.replace(/[^\d.]/, '')
                            .replace(/,/g, '')
                            .replace(/^0+(\d)/, '$1') // 第一位0开头,0后面为数字,则过滤掉,取后面的数字
                            .replace(/^\./, '0.') // 如果输入的第一位为小数点,则替换成 0. 实现自动补全
                            .match(digitReg)[0] || '' // 最终匹配得到结果 以数字开头,只有一个小数点,而且小数点后面只能有0到2位小数
                        // 负数 并且 允许输入符号
                        if (isNegative && negative) {
                            if (val.match(/-/g)?.length === 2) newValue = val.split('-').join('')
                            newValue = '-' + newValue
                        }

                        if (newValue.slice(-1) === '.' && digit === 0) {
                            newValue = Number(newValue)
                        }
                        // 输入值超出最值 , isReplace 为 true 就 替换,否则就还原上次输入的值
                        if (max !== undefined && newValue > max) {
                            newValue = isReplace ? max : String(newValue).slice(0, -1)
                        } else if (min !== undefined && newValue < min) {
                            newValue = isReplace ? min : String(newValue).slice(0, -1)
                        } else { // 输入值未超出最值
                            el.old = newValue
                        }
                        // 判断是否需要更新,避免进入死循环\
                        if (newValue !== el.value) {
                            el.value = newValue
                            el.dispatchEvent(new Event('input')) // 通知v-model更新
                        }
                    }
                    el.blurHander = function (e) {
                        const { digit } = binding.value || {}
                        const digitReg = new RegExp(`^\\d*(\\.?\\d{0,${digit === undefined ? 2 : digit}})`, 'g')
                        if (el.value === '-') {
                            el.value = ''
                            el.dispatchEvent(new Event('input')) // 通知v-model更新
                            return
                        }
                        let newValue = el.value.replace(/[^\d.]/, '')
                            .replace(/^0+(\d)/, '$1') // 第一位0开头,0后面为数字,则过滤掉,取后面的数字
                            .replace(/^\./, '0.') // 如果输入的第一位为小数点,则替换成 0. 实现自动补全
                            .match(digitReg)[0] || '' // 最终匹配得到结果 以数字开头,只有一个小数点,而且小数点后面只能有0到2位小数
                        if (newValue.slice(-1) === '.' && digit !== 0 && digit !== undefined) {
                            newValue = Number(newValue)
                            el.value = newValue
                            el.dispatchEvent(new Event('input')) // 通知v-model更新
                        }
                    }
                    el.compositionstart = function(e){
                        el.lock = true
                        e.preventDefault();
                        e.stopPropagation();
                    }
                    el.compositionend = function(e){
                        el.lock = false
                        el.value = parseFloat(el.value)
                        el.dispatchEvent(new Event('input'))
                        e.preventDefault();
                        e.stopPropagation();
                    }
                    el.addEventListener('input', el.handler)
                    el.addEventListener('blur', el.blurHander)
                    el.addEventListener('compositionstart', el.compositionstart)
                    el.addEventListener('compositionend', el.compositionend)
                },
                unbind (el) {
                    el.removeEventListener('input', el.handler)
                    el.removeEventListener('blur', el.blurHander)
                    el.removeEventListener('compositionstart', el.compositionstart)
                    el.removeEventListener('compositionend', el.compositionend)
                }
            }
        }
    })
</script>
</html>

指令的大致实现过程就监听输入,根据输入值进行各种场景的处理,compositionstartcompositionend来处理 输入中文的特殊场景,经过自测和项目中的使用,基本满足需求,如果不满足你的需求,可以复制下来进行扩展,实现思路 可以用于React、Vue3等其他,万变不离其宗。

学习资料:点此下载

标签:el,digit,value,输入框,最值,Vue2.0,新手,newValue,输入
From: https://blog.51cto.com/u_15723831/9431082

相关文章

  • 什么是IDE?新手用哪个IDE比较好?
    哈喽大家好,我是咕噜美乐蒂,很高兴又见面啦!今天我们来了解一下什么是IDE以及新手应该如何选择IDE比较合适。一、什么是IDE?IDE(IntegratedDevelopmentEnvironment,集成开发环境)是一种软件应用程序,它为程序员提供了编写、测试和调试代码的所有工具。IDE通常由源代码编辑器、编译器、调......
  • Linux新手村必备!这些常用操作命令你掌握了吗?
    在计算机的世界里,Linux操作系统以其强大的功能和灵活性受到了广大程序员和IT爱好者的喜爱。然而,对于初学者来说,Linux的操作命令可能会显得有些复杂和难以理解。今天,我们就来一起探索一些Linux常用操作命令,让你的计算机操作更加流畅。一、目录操作首先带大家了解一下Linux系统目......
  • 新手开发小程序教程怎么去开发小程序基本教程分享 -24软件网
    下面是一篇关于新手程序员开发小程序的教程:第一步:注册微信小程序账号进入微信公众平台首页,点击"立即注册"按钮进行注册。选择注册账号类型为小程序。填写账号信息,确保填写的邮箱是未被微信公众平台注册、未被个人微信号绑定的邮箱。第二步:了解基本语法小程序使用的是类似......
  • 走出大模型部署新手村!小明这样用魔搭+函数计算
    作者:拓山前文介绍了魔搭ModelScope社区模型服务SwingDeploy服务。开发者可以将模型从魔搭社区的模型库一键部署至阿里云函数计算,当选择模型并部署时,系统会选择对应的机器配置。按需使用可以在根据工作负载动态的减少资源,节约机器使用成本。5分钟完成从开源模型至模型推理API服......
  • 给想进入餐饮业新手一些建议
    1、这个行业很有欺骗性,表面上人山人海,毛利率很高,一般都有60-70%,由于有房租,人工,水电油盐,工商税务,设备装修折旧,其实纯利率就那么一点,运气好有20%,一般的就15%左右,那些纯利率到30%以上的基本上都是旅游景区赚钱赚黑了的老板,见一个宰一个。2、口味很重要,没有秘方的人不要随便......
  • MrakDown新手使用
    MarkDown学习二级标题字体hellowordhellowordhellowordhelloword引用千夜学java走向人生巅峰分割线图片超链接[千夜的博客](千夜学java-博客园(cnblogs.com))列表abc132d1addada表格姓名年龄成绩张三18100李四1990王五208......
  • 小白scanf------新手必备
    兄弟们说实话,我感觉我今天特别的兴奋,刚刚发完一篇我就又发了一另一篇文章,(〜∇)〜(〜∇)〜(〜∇)〜像我这么难得的新人作者,来点赞来点关注,感谢各位帅哥美女。我们刚刚介绍了printf相关的一些知识。当然对于c语言关键的输入和输出,我们刚刚说了输出。接下来介绍的就是c语言中常见的输入......
  • 小白printf限定宽度和输出格式------新手必备
    大家好,断更了一个月自己在考试所以没有更新,这里我今年的第一篇文章依旧依旧是新手的printf的相关知识,一,printf的限定宽度哦当我们使用printf的时候我们大家对于printf的打印感觉好像什么都可以打印,无论多宽,例如我们打印“c语言是世界上最好的语言”#define_CRT_SECURE_NO_WARNINGS......
  • 【新手友好】用Pyspark和GraphX解析复杂网络数据
    从零开始在本文中,我们将详细介绍如何在Python/pyspark环境中使用graphx进行图计算。GraphX是Spark提供的图计算API,它提供了一套强大的工具,用于处理和分析大规模的图数据。通过结合Python/pyspark和graphx,您可以轻松地进行图分析和处理。为了方便那些刚入门的新手,包括我自己......
  • 前端输入框脱敏(vue)
    1.组件<scriptlang="tsx">importtype{PropType}from'vue';import{typeInputProps,Input}from'ant-design-vue';import{EyeInvisibleOutlined,EyeTwoTone}from'@ant-design/icons-vue';import{isNil}......