美文网首页
vue输入框input只能输入两位小数

vue输入框input只能输入两位小数

作者: 全栈的猫南北 | 来源:发表于2023-10-22 16:40 被阅读0次

    视图

      <div>
        <input  type="digit" v-model="inputValue" @input="handleInput" />
      </div>
    

    js

    // 处理输入的内容,只允许输入两位小数
                handleInput(event) {
                    if (event.detail.value) {
                        this.isShowClear = true
                    }
                    let val = event.detail.value;
                       val = val.replace("-", "");//屏蔽负数
                    // 如果输入内容不是数字和小数点,则直接返回上次输入的值。在input里已经处理过:type="digit"
    //=========================================
                    if (!/^\d+(\.\d*)?$/.test(val)) {
                        event.detail.value = this.inputValue;
                        return;
                    }
                    // console.log('处理输入的内容', val);
                    // 将输入的内容转为浮点型
                    val = parseFloat(val);//关键代码,其他可注释
                    // 如果转换失败,则直接返回上次输入的值
                    if (isNaN(val)) {
                        event.detail.value = this.inputValue;
                        return;
                    }
    //=====================================
                    // 只保留两位小数
                    
                    if(AMapUtils.isMoreThanTwo(val))
                    {
                        val = val.toFixed(2);
                    }
                    // console.log('只保留两位小数', val);
                    // 更新数据
                    this.$nextTick(() => {
                        this.inputValue = val;
                        event.detail.value = val;
                    });
                    this.$forceUpdate();
                    //保证只能输入两个小数
                },
    

    判断小数是否超过两位

    function isMoreThanTwo(num) {  
        // 使用正则表达式判断是否是小数  
        if(/\./.test(num)) {  
            // 使用split('.')将数字分割成整数部分和小数部分  
            var parts = num.toString().split('.');  
            // 获取小数部分的长度  
            var decimalPlaces = parts[1].length;  
            // 如果小数部分的长度大于2,则返回true,否则返回false  
            return decimalPlaces > 2;  
        } else {  
            return false;  
        }  
    }
    

    相关文章

      网友评论

          本文标题:vue输入框input只能输入两位小数

          本文链接:https://www.haomeiwen.com/subject/yrxdidtx.html