uniapp 自定义类微信支付键盘 （微信小程序)

效果图

代码:

	<view class="popups popupsB">
						<view class="appreciatePrice">
							<view class="appreciatePriceTitle">
								赞赏金额
							</view>
							<view class="appreciatePriceInput flex ac">
								￥<input type="text" disabled class="appreciatePriceInputs" />
							</view>
							<view class="minAppreciatePrice">
								最低赞赏￥
							</view>
						</view>
						<view class="">
							<view class="keyboard flex ac jsb">
								<view class="keyboardLeft">
									<!-- 19数字 -->
									<view class="flex flexwrap">
										<view class="keyboardLeftNumber flex jc ac" v-for="(item,index) in keyboard"
											:key="index">
											{{item}}
										</view>
									</view>
									<!-- 0和点的按键 -->
									<view class="keyboardLeftZooDrop flex jsb ac">
										<view class="keyboardLeftZoo  flex jc ac">
											0
										</view>
										<view class="keyboardLeftDrop  flex jc ac">
											.
										</view>
									</view>
								</view>
								<!-- 右边确定和删除 -->
								<view class="keyboardRight">
									<view class="keyboardRightDel  flex jc ac">
										<u-icon name="close" color="#232323" size="20"></u-icon>
									</view>
									<view class="keyboardRightConfirm  flex jc ac">
										确定
									</view>
								</view>
							</view>
							<view class="liness">

							</view>
						</view>

					</view>

css

.popups {
		height: 55vh;
		padding: 0rpx 30rpx 40rpx 30rpx;
		box-sizing: border-box;
	}

	.popupsB {
		padding: 0 !important;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.appreciatePrice {
			padding: 30rpx;
			box-sizing: border-box;

			.appreciatePriceTitle {
				font-size: 24rpx;
				// padding-left: 10rpx;
				// box-sizing: border-box;
			}

			.appreciatePriceInput {
				padding: 30rpx 0rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #f5f5f5;
				font-size: 50rpx;
				font-weight: bold;

				.appreciatePriceInputs {
					margin-left: 10rpx;
				}
			}

			.minAppreciatePrice {
				color: #999;
				margin-top: 20rpx;
				font-size: 24rpx;
			}
		}

	}

	.keyboard {
		padding: 20rpx;
		box-sizing: border-box;
		background: #f5f5f5;
		border-radius: 8rpx;

		.keyboardLeft {
			width: 480rpx;
			height: 380rpx;
			// background: red;

			.keyboardLeftNumber {
				width: 146.66rpx;
				height: 80rpx;
				background: #fff;
				font-size: 30rpx;
				font-weight: bold;
				border-radius: 8rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;

			}

			.keyboardLeftNumber:nth-child(3n+3) {
				margin-right: 0 !important;
			}

			.keyboardLeftZooDrop {
				.keyboardLeftZoo {
					width: 313.33rpx;
					background: #fff;
					font-size: 30rpx;
					font-weight: bold;
					border-radius: 8rpx;
					height: 80rpx;
				}

				.keyboardLeftDrop {
					width: 146.66rpx;
					background: #fff;
					font-size: 30rpx;
					font-weight: bold;
					border-radius: 8rpx;
					height: 80rpx;
				}
			}

		}

		.keyboardRight {
			width: 150rpx;
			height: 380rpx;

			// background: blue;
			.keyboardRightDel {
				width: 146.66rpx;
				background: #fff;
				font-size: 30rpx;
				font-weight: bold;
				border-radius: 8rpx;
				height: 80rpx;
			}

			.keyboardRightConfirm {
				width: 146.66rpx;
				background: #fff;
				font-size: 30rpx;
				font-weight: bold;
				border-radius: 8rpx;
				height: 272rpx;
				background: #4ac163;
				margin-top: 20rpx;
				color: #fff;
			}

			.keyboardRightConfirmNo {
				opacity: 0.1;
			}
		}
	}

一些公共样式

	.flex{
		display: flex;
	}
	.jc{
		justify-content: center;
	}
	.ac{
		align-items: center;
	}
	.w100h100{
		width: 100%;
		height: 100%;
	}
	.jsb{
		justify-content: space-between;
	}
	.flexwrap{
		flex-wrap: wrap;
	}
	.me-text-beyond-multi2{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.je{
		justify-content: flex-end;
	}
	.jsa{
		justify-content: space-around;
	}

js

keyboard: [1, 2, 3, 4, 5, 6, 7, 8, 9],

并未做任何事件，如需请自行添加。