uniapp小程序、uniappH5自定义快捷输入键盘

额12138

已于 2024-04-12 09:35:35 修改

阅读量1.1k

点赞数 3

分类专栏：微信小程序 uniapp 文章标签： uni-app 小程序 vue.js

于 2024-04-08 11:43:28 首次发布

本文链接：https://blog.csdn.net/mengmeng12138/article/details/137501990

版权

微信小程序同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

uniapp

3 篇文章 0 订阅

订阅专栏

此键盘根据其他大佬写好的自定义键盘的基础上，按本人所需需求进行修改而来
大佬写好的uniapp插件为：https://ext.dcloud.net.cn/plugin?id=1052

<template>
	<view class="content">买单金额￥<text class="">{{pay_money}}</text>
		<!-- 自定义键盘 -->
		<cwx-keyboard @confirmEvent="confirmEvent" :money.sync="pay_money" btn-color='#07c160'
			title="确认"></cwx-keyboard>
		<!-- 自定义键盘 -->
	</view>
</template>
<script>
	import cwxKeyboard from '@/components/cwx-keyboard/cwx-keyboard'
	export default {
		components: {
			cwxKeyboard,
		},
		data() {
			return {
				pay_money: '',
			}
		},
		onLoad() {},
		watch: {
			pay_money(val) {
				this.$emit('update:money', val);
			}
		},
		methods: {
			confirmEvent(e) {
				if (e != '') {
					this.$refs.popup.open('bottom')
				}
			},
		}
	}
</script>

cwx-keyboard
<template>
	<view class='keyboard' @click.stop='_handleKeyPress'>
		<view class=' kuai-row'>
			<view class='kuai-cell  kuai' data-num='100'>￥100</view>
			<view class='kuai-cell  kuai' data-num='200'>￥200</view>
			<view class='kuai-cell  kuai' data-num='300'>￥300</view>
			<view class='kuai-cell  kuai' data-num='500'>￥500</view>
		</view>
		<view class='key-row'>
			<view class='key-cell cell_b' data-num='7'>7</view>
			<view class='key-cell cell_b' data-num='8'>8</view>
			<view class='key-cell cell_b' data-num='9'>9</view>
			<view class='key-cell cell_b' data-num='-1'></view>
		</view>
		<view class='key-row'>
			<view class='key-cell cell_b' data-num='4'>4</view>
			<view class='key-cell cell_b' data-num='5'>5</view>
			<view class='key-cell cell_b' data-num='6'>6</view>
			<view class='key-cell cell_b' data-num='-1'></view>
		</view>
		<view class='key-row'>
			<view class='key-cell cell_b' data-num='1'>1</view>
			<view class='key-cell cell_b' data-num='2'>2</view>
			<view class='key-cell cell_b' data-num='3'>3</view>
			<view class='key-cell cell_b' data-num='-1'></view>
		</view>
		<view class="key-zero-and-point">
			<view class="a cell_b zero" data-num='00'>00</view>
			<view class="a cell_b zero" data-num='0'>0</view>
			<view class="a cell_b point" data-num='.'>.</view>
		</view>

		<view @touchstart="touchstart" @touchend="touchend" data-num='D' class="key-confirm2 font-bold fsize-20">
			<text data-num='D'>删除</text>
		</view>

		<view class='key-confirm' :style="{'background':btnColor}" data-num='S'>
			<view data-num='S' class="">
				<text data-num='S' class="title font-bold fsize-22">{{title}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "keyBoard",
		props: {
			title: {
				default: '确认',
				type: String
			},
			btnColor: {
				default: 'green',
			}
		},
		data() {
			return {
				money: '',
				Cdel: '',
				Time: ''
			}
		},

		watch: {
			money(val) {
				this.$emit('update:money', val);

			}
		},

		methods: {
			touchstart() {
				this.Time = setInterval(() => {
					console.log(this.money);
					if (this.money == '') {
						clearInterval();
					}
					this.money = this.money.substring(0, this.money.length - 1);
				}, 200)
			},
			touchend() {
				clearInterval(this.Time);
			},
			//处理按键
			_handleKeyPress(e) {
				let num = e.target.dataset.num;
				//不同按键处理逻辑
				// -1 代表无效按键，直接返回
				if (num == -1) return false;
				switch (String(num)) {
					//小数点
					case '.':
						this._handleDecimalPoint();
						break;
						//删除键
					case 'D':
						this._handleDeleteKey();
						break;
						//清空键
					case 'C':
						this._handleClearKey();
						break;
						//确认键
					case 'S':
						this._handleConfirmKey();
						break;
					case '100':
						this._kuai(100);
						break;
					case '200':
						this._kuai(200);
						break;
					case '300':
						this._kuai(300);
						break;
					case '500':
						this._kuai(500);
						break;
					default:
						this._handleNumberKey(num);
						break;
				}
			},
			_kuai(e) {
				this.money = String(e)
			},
			//处理小数点函数
			_handleDecimalPoint() {
				//如果包含小数点，直接返回
				if (this.money.indexOf('.') > -1) return false;
				//如果小数点是第一位，补0
				if (!this.money.length)
					this.money = '0.';
				//如果不是，添加一个小数点
				else
					this.money = this.money + '.';
			},
			//处理删除键
			_handleDeleteKey() {
				let S = this.money;
				//如果没有输入，直接返回
				if (!S.length) return false;
				// // //否则删除最后一个
				this.money = S.substring(0, S.length - 1);
			},

			//处理清空键
			_handleClearKey() {
				this.money = '';
			},

			//处理数字
			_handleNumberKey(num) {
				if (this.money.length == 8) {
					return
				}
				let S = this.money;
				//如果有小数点且小数点位数不小于2
				if (S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length < 2)
					this.money = S + num;
				//没有小数点
				if (!(S.indexOf('.') > -1)) {
					//如果第一位是0，只能输入小数点
					if (num == 0 && S.length == 0)
						this.money = '0';
					if (num == '00' && S.length == 0)
						this.money = '';
					else {
						if (S.length && Number(S.charAt(0)) === 0) return;
						this.money = S + num;
					}

				}
			},

			//提交
			_handleConfirmKey() {
				let S = this.money;
				//未输入
				if (!S.length || S == 0) {
					uni.showToast({
						title: '请输入金额',
						icon: 'none',
						duration: 1000
					});
					return false;
				}
				//将 8. 这种转换成 8.00
				if (S.indexOf('.') > -1 && S.indexOf('.') == (S.length - 1))
					S = Number(S.substring(0, S.length - 1)).toFixed(2);
				//保留两位
				S = Number(S).toFixed(2);
				this.$emit('confirmEvent', S); //提交参数
			}
		}
	}
</script>

<style lang="less" scoped>
	.kuai {
		background: #4caf50;
		color: #fff;
		border-radius: 2rem;
		padding: 6px 0;
		font-size: 25px
	}


	.keyboard .kuai-row {
		display: flex;
		justify-content: space-around;
		align-content: center;
		padding: 0 5px;
		margin: 0 0 15px 0;
	}

	.keyboard .kuai-cell {

		font-size: 40upx;
		text-align: center;
		width: 23%;
	}

	.cell_b {
		border-right: 1px solid #d5d5d6;
		border-bottom: 1px solid #d5d5d6;
	}

	.key-container {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.keyboard {
		flex: 1;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 47.9vh;
		width: 100%;

		// background: #FFFFFF;
	}

	.keyboard .key-row {
		display: flex;
		display: -webkit-flex;
		position: relative;
		height: 10vh;
		line-height: 10vh;
		background: #FFFFFF;
	}

	.keyboard .key-cell {
		flex: 1;
		-webkit-box-flex: 1;
		font-size: 60upx;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.keyboard .key-confirm {
		position: absolute;
		text-align: center;
		height: 29.4vh;
		width: 25%;
		line-height: 30vh;
		color: #FFFFFF;
		z-index: 5;
		right: 0;
		bottom: 0;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.keyboard .key-confirm2 {
		position: absolute;
		height: 10vh;
		width: 25%;
		line-height: 10vh;
		z-index: 5;
		right: 0;
		top: 8vh;


		display: flex;
		justify-content: center;
		align-items: center;
	}

	.key-zero-and-point {
		display: flex;
		height: 10vh;
		justify-content: center;
		align-items: center;
		width: 75%;
		font-size: 60upx;
		background: #FFFFFF;

		.zero {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 33.33%;
			font-size: 60upx;
			text-align: center;
			height: 100%;
		}

		.point {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 33.33%;
			font-size: 60upx;
			text-align: center;
			height: 100%;
		}
	}

	.key-cell:active {
		color: white;
		background: black; //黑色
		opacity: 0.1; //这里重要，就是通过这个透明度来设置
	}

	.a:active,
	.key-confirm2:active {
		color: white;
		background: black; //黑色
		opacity: 0.1; //这里重要，就是通过这个透明度来设置
	}
</style>