uniapp中输入金额的过滤（只允许输入数字和小数点）

一、完整代码：

<template>
	<view class="numberIndex" :style="{ paddingTop: navbarHeight + 'px' }">
		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="navbar-left" @click="goBack">
				<view class="nav-arrow"></view>
			</view>
			<view class="navbar-title">{{title}}</view>
		</view>
		<view class="title">选择固定数字，或者自行输入</view>
		<view class="input">
			<input class="uni-input" type="text" confirm-type="done" placeholder="请输入或选择" :value="inputValue"
				@blur="handleBlur" @input="changeInput"
				placeholder-style='font-weight: 400!important;font-size: 36rpx!important;color: #7D8EB3!important;' />
			<view class="inputClean" v-show="showClearIcon" @click="clearIcon">
				<image src="https://ele.qre.com.cn/charging/clean.png" mode="aspectFit" class="input-icon" />
			</view>
		</view>
		<view class="list">
			<view v-for="(item,index) in list" :key="index" @click="chooseNumber(item)"
				:class="(!!chooseValue && (chooseValue === item)) ? 'list-box highLight' : 'list-box'">
				{{item}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '数字输入',
				navbarHeight: 0, // 导航栏高度
				statusBarHeight: 0,
				inputValue: '', // 输入的数字
				showClearIcon: false,
				list: [20, 30, 40, 50, 60, 70],
				chooseValue: 20, // 选择的数字
				minVal: 5, // 输入的最小数字
				maxVal: 1000 // 输入的最大数字
			}
		},

		onLoad() {
			// 获取系统信息计算导航栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			this.navbarHeight = this.statusBarHeight + 44; // 44是导航栏标准高度
			this.inputValue = '20'
		},
		methods: {
			goBack() {
				// 获取当前页面栈
				const pages = getCurrentPages();

				if (pages.length > 1) {
					// 如果有上一页，则返回
					uni.navigateBack();
				} else {
					// 如果是首页，则跳转到指定页面
					uni.redirectTo({
						url: '/pages/index/index' // 替换为您的首页路径
					});
				}
			},
			changeInput: function(e) {
				let value = e.detail.value.trim()
				value = value.replace(/[^\d.]/g, '');
				const dotArr = value.split('.');
				if (dotArr.length > 2) {
					value = dotArr[0] + '.' + dotArr.slice(1).join('');
				}
				// 2. 处理"过滤后的值与原输入值一致"的场景
				if (value === this.inputValue) {
					// 临时修改 inputValue 为其他值，再立即改回，强制触发视图更新
					this.inputValue = '';
					this.$nextTick(() => {
						this.inputValue = value;
					});
				} else {
					// 普通场景：直接赋值
					this.inputValue = value;
				}
				if (value) {
					this.showClearIcon = true;
					this.chooseValue = 0
				} else {
					this.clearIcon()
				}
			},
			// 失焦时强制修正
			handleBlur(e) {
				if (!this.inputValue) {
					this.inputValue = '20'
					return
				}
				const numValue = Number(this.inputValue)
				if (numValue < this.minVal) {
					this.inputValue = this.minVal.toString()
				} else if (numValue > this.maxVal) {
					this.inputValue = this.maxVal.toString()
				}
			},
			clearIcon() {
				this.inputValue = '20';
				this.chooseValue = 20
				this.showClearIcon = false;
			},
			chooseNumber(item) {
				this.inputValue = item
				this.chooseValue = item
			}
		}
	}
</script>

<style scoped>
	.numberIndex {
		width: 100vw;
		height: 100vh;
		background-color: #fff;
		overflow: hidden;
	}

	.numberIndex .custom-navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		background-color: #ffffff;
	}

	.numberIndex .nav-arrow {
		width: 18rpx;
		height: 18rpx;
		border-left: 2rpx solid #010101;
		border-bottom: 2rpx solid #010101;
		transform: rotate(45deg);
		margin-left: 46rpx;
	}

	.numberIndex .navbar-title {
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: 600;
		font-size: 32rpx;
		color: #000000;
	}

	.numberIndex .title {
		padding: 20rpx 30rpx;
		font-weight: 600;
		font-size: 36rpx;
		color: #0A1833;
	}

	.numberIndex .input {
		box-sizing: border-box;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		height: 112rpx;
		border-bottom: 2rpx solid #F4F7FB;
		margin: 0 30rpx;
	}

	.numberIndex .input-uint {
		margin-right: 8rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #0A1833;
	}

	.numberIndex .uni-input {
		width: calc(100vw - 104rpx);
		font-weight: 600;
		font-size: 36rpx;
		color: #0A1833;
	}

	.numberIndex .input-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.numberIndex .inputClean {
		z-index: 300;
		position: relative;
		padding: 10rpx;
	}

	.numberIndex .list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30rpx;
		margin: 20rpx 30rpx;
	}

	.numberIndex .list-box {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #E9F0FF;
		border: 2rpx solid #E9F0FF;
		color: #7D8EB3;
		border-radius: 8rpx;
		padding: 18rpx 0;
		font-weight: 600;
		font-size: 32rpx;
	}

	.numberIndex .highLight {
		background: #FFFFFF;
		border: 2rpx solid #3377FF;
		color: #3377FF;
	}
</style>

二、效果预览：