Browse Source

入场页面添加汽车键盘

gcz 3 years ago
parent
commit
a4f0b157a3
1 changed files with 21 additions and 4 deletions
  1. 21 4
      pages/getin/getin.vue

+ 21 - 4
pages/getin/getin.vue

@@ -39,7 +39,7 @@
 		
 		<view class="other-info">
 			<view class="other-info-item u-flex">
-				<u-input v-model="vehicleNo" height="80" type="text" placeholder="输入车牌号" />
+				<u-input v-model="vehicleNo" height="80" type="text" @focus="messageInputClick" placeholder="输入车牌号" />
 				<u-button type="primary" @click="handleParkInInfo">确认</u-button>
 			</view>
 			<!-- <view class="other-info-item">
@@ -66,6 +66,7 @@
 		<u-select v-model="carTypeShow" :default-value="[2]" :list="carTypeList" @confirm="carTypeConfirm"></u-select>
 		<u-select v-model="carColorShow" :default-value="[2]" :list="carColorList" @confirm="carColorConfirm"></u-select>
 		<u-toast ref="uToast" />
+		<u-keyboard ref="uKeyboard" mode="car" @change="keyboardChange" @backspace="backspace" v-model="keyboardshow"></u-keyboard>
 	</view>
 </template>
 
@@ -92,12 +93,13 @@
 				vehicleType:0,
 				vehicleColor:0,
 				currentTime: new Date(), // 获取当前时间
-				vehicleNo:null,
+				vehicleNo:'',
 				vehicleImage:null,
 				memberId:null,
 				depositAmount:null,
 				balance:null,
-				images:[]
+				images:[],
+				keyboardshow:false,
 			}
 		},
 		onLoad(page) {
@@ -254,7 +256,22 @@
 						});
 					}
 				});
-			}
+			},
+			messageInputClick(){
+				this.keyboardshow = true;
+			},
+			// 按键被点击(点击退格键不会触发此事件)
+			keyboardChange(val) {
+				// 将每次按键的值拼接到value变量中,注意+=写法
+				this.vehicleNo += val;
+				console.log(this.newPlateNumber);
+			},
+			// 退格键被点击
+			backspace() {
+				// 删除value的最后一个字符
+				if(this.vehicleNo.length) this.vehicleNo = this.vehicleNo.substr(0, this.vehicleNo.length - 1);
+				console.log(this.vehicleNo);
+			},
 			
 		}