实现div自定义页面数字键盘输入

在移动端上，输入时不想启动自带的输入法，只想直接在页面上按按就能输入数字，十分方便。

代码如下：

<input class="input-num" v-model="value"  @tap="hideKeyboard"/>
			<view class="number">
				<view class="every" v-for="(item,index) in numberList" @tap="inputNumber(index)"
@longtap="clearNumber(index)">{{item}}</view>
			</view>

css:(可以自己设置)

.input-num {
				width: 480rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 10rpx;
				background-color: rgba(221, 230, 251, 100);
				color: rgba(16, 16, 16, 100);
				font-size: 30rpx;
				text-align: center;
				margin: 20rpx auto;
			}
			.number {
				width: 480rpx;
				margin: 0 auto;
				border-radius: 20rpx;
				overflow: hidden;
				.every {
					display: inline-block;
					width: 160rpx;
					height: 100rpx;
					line-height: 100rpx;
					background-color: rgba(0, 48, 157, 100);
					color: rgba(255, 255, 255, 100);
					font-size: 36rpx;
					text-align: center;
					font-family: Roboto;
					border: 1px solid rgba(255, 255, 255, 100);
				}
			}

js：

		data() {
			return {
				value: '',
				numberList: [1, 2, 3, 4, 5, 6, 7, 8, 9, "清除", 0, "开启"]//键盘的内容
			}
		},
		methods: {
		   //点击聚焦，隐藏自带的键盘
			hideKeyboard(){
				uni.hideKeyboard();
			},
			//键盘主功能
			inputNumber(index) {
				if ((typeof this.numberList[index]) == 'number') {
					this.value += this.numberList[index]
				}
				if (this.numberList[index] == '清除') {
					this.value = this.value.slice(0, -1)
				}
				if (this.numberList[index] == '开启') {
					if (this.value == 0) {
						console.log('不能为空');
					} else {
							自己写一些跳转什么的			
					}

				}
			},
			//长按清除的时候，触发连续清除
			clearNumber(index) {
				if (this.numberList[index] == '清除') {
					console.log(this.value, "chang");
					let clearNum = setInterval(() => {
						this.value=this.value.slice(0,-1)
						if (this.value == '') {
							clearInterval(clearNum)
						}
					}, 200)
				}
			}
		}

一些注意的地方：
1、最好有长按清除的方法，不然一直长按清除只能触发一次，影响用户体验。
2、注意隐藏自身的键盘，这里最好使用uni.hideKeyboard()方法，虽然disabled=true也可以不弹出，但是不能聚焦，也会影响用户体验。