uniapp + vue3微信小程序开发（8）input保留两位小数

最新推荐文章于 2024-04-27 14:59:16 发布

林大大哟

最新推荐文章于 2024-04-27 14:59:16 发布

阅读量1.7k

点赞数

分类专栏： uniapp 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_39404437/article/details/125066604

版权

uniapp 专栏收录该内容

9 篇文章 33 订阅

订阅专栏

输入框的开发，算是非常常用的了，我们使用uniapp开发输入框的话，会有那么几个bug，由uniapp缺陷导致。

1、uniapp input缺陷

1.1、每次input框输入都无法修改值

解决方法：

<input type="digit" @input="inputInput" :value="amount"/>

<script setup>
    const inputInput= (e) => {
        amount.value = ''
        setTimeout(() => {
            amount.value = e.detail.value
        })
    }
</script>

2、如何保留两位小数

网上大多数博客都说的正则限制，但是我觉得不行也不好，我提出的方法是maxLength限制长度，思路为判断整数位数，那么 maxLength = 整数位数 + 3 （这个3 包括小数点长度1和两位小数长度）

我是在input 失焦后触发方法，思路如下：

valitMoney是我验证是否通过的标志，你可以根据自己代码需要来决定是否用，然后我这个输入框要保证的效果就是：值不能超过9999，然后不管输入的啥，最后都要有两位小数，例：888 => 888.00， 99.1 => 99.10， 0 => 0.00

截图:

代码：

    <view class="amount">
				<view class="input-suffix">
					￥
				</view>
				<input class="input-account" type="digit" :value="amount" :disabled="payStatus" :maxlength="maxlength"  @input="inputInput" @focus="inputFocus" @blur="inputBlur" placeholder-class="input-placeholder"/>
			</view>

<script setup>
    /**
	 * 输入框失焦后触发
	 */
	const inputBlur = (e) => {
		amount.value = ''
		setTimeout(() => {
			if (e.detail.value !== '') {
				if (Number(e.detail.value) > 9999) {
					uni.showToast({
						title: '数额太大，请修改',
						icon: 'none'
					})
					amount.value = ''
					return
				}
				let flag = e.detail.value.indexOf(".")
				// 整数，没有小数
				if (flag === -1) {
					let bigLen = e.detail.value.length // 整数位数
					if (bigLen > 4) {
						amount.value = e.detail.value + '.00'
						maxlength.value = 7
					} else {
						maxlength.value = bigLen + 1 + 2
						amount.value = e.detail.value + '.00'
					}
				// 有小数
				} else {
					let bigLen = e.detail.value.split('.')[0].length // 整数位数
					let smallLen = e.detail.value.split('.')[1].length // 小数位数
					if (smallLen === 0) {
						amount.value = e.detail.value + '00'
					} else if (smallLen === 1) {
						amount.value = e.detail.value + '0'
					} else if (smallLen === 2) {
						amount.value = e.detail.value
					}
					maxlength.value = bigLen + 1 + 2
				}
				valitMoney.value = true
			} else {
				amount.value = ''
				valitMoney.value = false
			}	
		})
		
	}
</script>
<style lang="scss" scoped>
            .amount {
				margin-top: 30rpx;
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				width: 690rpx;
				height: 89rpx;
				box-sizing: border-box;
				border: 1px solid #F56C6C;
				background-color: #FEF0F0;
				font-size: 46rpx;
				font-weight: bold;
				color: #CA2915;
				line-height: 89rpx;
				.input-suffix{
					flex: 0 1 45%;
					text-align: right;
				}
				.input-account{
					flex: 0 1 55%;
					border-radius: 10rpx;
					text-align: left;
					position: relative;
				}
			}
</style>