自定义输入框输入页面

最新推荐文章于 2024-07-24 23:00:08 发布

南庐

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量141

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_73184582/article/details/131755147

版权

<!-- 输码 -->
<template>
	<view class="paymentCodeBox">
		<view class="address">
			<text class="fwhfont icon-icon-jingyingshezhi"></text>
			<view style="font-weight: bold;display: inline-block;font-size: 32rpx;">{{userInfo.channelname}}</view>
		</view>
		<!-- 自定义键盘 -->
		<view class="password-set-page">
			<view class="setPage">
				<view class="input-container">
					<text class="inputText" v-if="inputValue">{{formattedValue}}</text>
					<text class="inputText" v-else style="color: #ccc;font-size: 32rpx;"
						@click="handlePaste">请输入卡券二维码下12-15位数字</text>
					<text v-if="inputValue" class="fwhfont icon-jp-del" style="padding-right: 42rpx;font-size: 62rpx;"
						@click="handleDelete" @longpress="clearContent"></text>
				</view>
				<view class="keyboard">
					<button v-for="(item, index) in 9" :key="index" @click="key(index + 1)">
						<text>{{ index + 1 }}</text>
					</button>
					<view style="width: 100%;display: flex;">
						<button @click="key(0)">
							<text>0</text>
						</button>
						<button @click="goSucces" style="color: #fff;width: 520rpx;"
							:style="inputValue.length>=12?'background-color:#4976F3;':'background-color:#AAC0F9;'">
							验券
						</button>
					</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		onLoad({
			way
		}) {
			this.way = way;
			this.UUID = this.$utils.createUUID();
		},
		data() {
			return {
				inputValue: '',
				way: '',
				UUID: '',
				list: {},
				isComfig: false,
			}
		},
		// 方法
		methods: {
			// 键盘
			key(key) {
				if (this.inputValue.length == 15) {
					this.$toast('最大券码长度不能超过15位')
					return
				}
				this.inputValue += key;
			},
			handleDelete() {
				const len = this.inputValue.length;
				if (len > 0) {
					this.inputValue = this.inputValue.slice(0, len - 1);
				}
			},
			clearContent() {
				this.inputValue = ''
			},
			handlePaste() {
				let that = this;
				uni.getClipboardData({
					success: function(res) {
						if (res.data.length < 12 || res.data.length > 15) {
							that.$toast('请输入正确的券码长度12-15位')
							return
						}
						that.$toast('粘贴成功！')
						that.inputValue = that.$utils.strTrim(res.data, 1)
					}
				});
			},
			goSucces() {
				if (this.inputValue.length < 12 || this.inputValue.length > 15) {
					this.$toast('请输入正确的券码长度12-15位')
					return
				}
				if (this.isComfig) return
				this.isComfig = true
				
			},

		},
		watch: {
			inputValue(newVal, oldVal) {
				const regex = /^[1-9]\d*$/; // 匹配非零正整数的正则表达式
				if (newVal !== '') {
					if (!regex.test(newVal)) {
						this.$toast('请输入数字!')
						this.inputValue = ''
					}
				}
			}
		},
		computed: {
			formattedValue() {
				// 将输入框的值每隔4位添加一个空格
				let val = this.inputValue.replace(/\s/g, '').replace(/(\d{4})(?=\d)/g, '$1 ');
				return val;
			}
		}

	}
</script>

<style lang="scss" scoped>
	.paymentCodeBox {
		width: 100%;
		background: #fff;

		.password-set-page {
			width: 100%;

			.setPage {
				background: #fff;
				border-radius: 20rpx 20rpx 0px 0px;

				.hites {
					padding-top: 61rpx;
				}
			}

			.keyboard {
				position: fixed;
				bottom: 0;
				width: 100%;
				background: #EEEEEE;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				button {
					display: flex;
					align-items: center;
					justify-content: center;
					width: calc(100vw / 3 - 1rpx);
					background: #FFFFFF;
					border-radius: 0;
					margin-top: 1rpx;
					font-size: 50rpx;
					height: 150rpx;

					&.button-hover:not(.hide) {
						background: #EEEEEE;
					}

					image {
						width: 52rpx;
						height: 38rpx;
					}
				}
			}
		}


	}

	.input-container {
		width: 94%;
		height: 100rpx;
		position: absolute;
		top: 20%;
		left: 5%;
		background-color: #F5F5F5;
		display: flex;
		color: black;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 10rpx;
		border-radius: 20rpx;

		.inputText {
			text-indent: 10rpx;
			font-size: 50rpx;
			font-weight: bold;
			width: 90%;
			height: 100rpx;
			line-height: 100rpx;
			overflow: hidden;
		}


	}

	/* 自动添加空格 */
	.number-input {
		-moz-appearance: textfield;
	}

	.number-input::-webkit-inner-spin-button,
	.number-input::-webkit-outer-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	.number-input:not(:placeholder-shown) {
		letter-spacing: 3px;
	}

	.address {
		text-indent: 15rpx;
		width: 95%;
		margin: 20rpx auto;
		background-color: #fff;
		border-radius: 10rpx;
		height: 80rpx;
		line-height: 80rpx;
		vertical-align: middle;

	}
</style>