【无标题】uniapp封装支付页面

话不多说,直接上代码

<template>
	<view>
		<!-- 输入框 -->
		<u--input placeholder="请输入内容" border="bottom" v-model="value" @focus="focusClick"  style="font-size: 30px;">
		</u--input>

		<!-- 键盘 -->
		<view>
			<u-keyboard ref="uKeyboard" mode="number" :show="showkeyboard" @change="valChange" @backspace="backspace"
				@confirm="accomplish" @cancel="abrogate"></u-keyboard>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: "",
				showkeyboard: false,
			};
		},
		methods: {
			//input触发事件
			focusClick() {
				this.showkeyboard = true
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.value += val;
				//确保输入的是数字
				this.value = this.value.replace(/[^\d\.]/g, '');
				//确保第一个输入的是数字
				this.value = this.value.replace(/^\./g, '');
				//确保不能输入两个小数点
				this.value = this.value.replace(/\.{2,}/g, '.');
				//保证小数点只出现一次，而不能出现两次以上     
				this.value = this.value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
				//确保只能输入两位小数
				this.value = this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
				//接近完美的正则就是0.的时候会报错
				// let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
				//验证是金钱，不能是00开口的数字
				let reg = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/
				if (reg.test(this.value)) {
					this.value = this.value
				} else {
					this.value = this.value.substr(0, this.value.length - 1)
				};
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.value.length) this.value = this.value.substr(0, this.value.length - 1);
			},
			//确定事件
			accomplish() {
				this.showkeyboard = false;
				this.$emit("accomplish", {
					vlaue: this.value
				})
			},
			//取消事件
			abrogate() {
				this.showkeyboard = false;
			}
		}
	}
</script>

组件中的金钱验证已经接近完美，组件中点击确定的时候把输入框的内容传给父组件，只需要在父组件中绑定一个方法就可以拿到输入框的内容
如果有什么可以随时联系我，可以随时交流，有不好的各位码奴也可以随时沟通。