记录uni-app + uview 车牌键盘

最近刚好在做小程序，里面有个车牌输入的功能。看到有些小程序的键盘输入非常智能，用户体验极好，但是呢，又不想重复造轮子。发现uview有这个组件，直接拿来用并且做些限制，先用着先。先上代码

先安装并且引入 uview，我这里是全局引入了，可以看文档配置按需引入

// 安装
npm install uview-ui@1.8.4

// main.js
import uView from "uview-ui"
Vue.use(uView)

// pages.json
// uView 配置
"easycom": {
    "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
"pages": []

老规矩，还是先写上页面效果

<view class="flex-bc carnum" @click='show = true'>
	<view class="bg-f5 car_item" :class='{ car_active: show && value.length == 0  }'>
		{{value[0]}}
	</view>
	<view class="bg-f5 car_item" :class='{ car_active: show && value.length == 1 }'>
		{{value[1]}}
	</view>
	<view class="f60">·</view>
	<view class="bg-f5 car_item" :class='{ car_active: show && value.length == 2 }'>
		{{value[2]}}
	</view>
	<view class="bg-f5 car_item" :class='{ car_active: show && value.length == 3 }'>
		{{value[3]}}
	</view>
	<view class="bg-f5 car_item" :class='{ car_active: show && value.length == 4 }'>
		{{value[4]}}
	</view>
	<view class="bg-f5 car_item" :class='{ car_active: show && value.length == 5 }'>
		{{value[5]}}
	</view>
	<view class="bg-f5 car_item" :class='{ car_active: show && value.length == 6 }'>
		{{value[6]}}
	</view>

	<view class="bg-f5 car_new flex-cc flex-wrap" :class='{ "car_active car_active_color":
		 show && value.length == 7 }' v-if='maybe( _ => !value[7], false)'>
		<view class="">+</view>
	</view>
	<view class="bg-f5 car_item" :class='{ car_active: show && value.length == 7 }' v-else>
		{{value[7]}}
	</view>

	<u-keyboard ref="uKeyboard" mode="car" v-model="show" @change="valChange" @backspace="backspace" :tooltip='false'
		:safe-area-inset-bottom='true' :mask='false'>
	</u-keyboard>
</view>

<style lang='scss' scoped>
.carnum { 
        .bg-f5 { background-color: #f5f5f5; }
        .f60 { font-size: 60rpx; } 
	.car_item {
		font-size: 32rpx;
		width: 70rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 8rpx;
		border: 2rpx dashed #f5f5f5;
		text-align: center;
	}
	.car_new {
		color: #70ecd8;
		font-size: 20rpx;
		width: 70rpx;
		height: 80rpx;
		border-radius: 8rpx;
		border: 2rpx dashed #f5f5f5;
	}
	.car_active {
		color: #25BBED;
		border: 2rpx solid #25BBED;
	}
	.car_active_color {
		color: #70ecd8;
		border: 2rpx solid #70ecd8;
	}
}
</style>

这里我用拼接字符串的方式来展示输入的车牌号码。所以我只需要控制这个value值展示即可。

data () {
    return {
        value: '',
        show: false,
    }
}

它这个键盘组件提供了两个方法，@change 和 @backspace监听按键和回退键。
回退键简单，每次回退了，直接就删除最后一位即可

// 退格键被点击
backspace() {
    // 删除value的最后一个字符
    if(this.value.length) this.value = this.value.substr(0, this.value.length - 1);
}

然后就是按键回调了。我是模仿那些手动写汽车键盘的逻辑做的一些限制。
1、如果输入了8位了，那就不给再输入了，下面的逻辑就不再走了。
2、第一位肯定得是省的简称，不能是英文和数字，如果不是省的简称，则不执行任何操作，不拼接字符串
3、第二位一定是 英文，不能是省的简称和数字
4、后面的几位则不能是省的简称。

valChange(val) {
	// 位数大于7，直接return
	if(this.value.length > 7) return

	// 判断是否为 省
	if(this.value.length < 1) {
		const reg = /^[\u4e00-\u9fa5]$/
		
		// 正则验证
		const str = reg.test(val)
		
		if(str) return this.value += val
	}
	// 判断是否为 英文
	if(this.value.length == 1) {
		const reg = /^[A-Z_]+$/
		
		// 正则验证
		const str = reg.test(val)
		
		if(str) return this.value += val
	}
	// 判断是否为 英文和数字
	if(this.value.length > 1 && this.value.length <= 7) {
		const reg = /^[a-zA-Z0-9_]+$/
		// 正则验证
		const str = reg.test(val)
		
		if(str) this.value += val
		
                // 如果封装成组件，需要这一步，如果不是，不需要这一步
                // 有6位以上了，说明车牌输入完了，再回调回去
		if(this.value.length >= 6) {
			return this.$emit('emitCarNum', this.value)
		}
	}
}

完。