uni-app 实现 车牌键盘
上篇实现了个uview组件的车牌键盘,今天来实现一个纯手写的,智能化的车牌键盘,先看个效果图
![](https://images.cnblogs.com/cnblogs_com/blogs/751865/galleries/2173584/o_220610091342_1654852373359.jpg)
![](https://images.cnblogs.com/cnblogs_com/blogs/751865/galleries/2173584/o_220610094520_1.jpg)
上代码,先实现个基本的样式
<view class="car_num-text">
<template v-for="(item,index) in brand">
<text v-if="item == '+'" :key='index'
class="car_num-license new_energy nowrap"
:class="{ 'new-active': isActive === index && index === brand.length - 1 }"
@click.capture="onBrandClick" :data-index='index'>新</text>
<template v-else-if="index == 2">
<text class="f60">·</text>
<text :key='index' class="car_num-license"
:class="{'active': isActive === index }"
@click.capture="onBrandClick"
:data-index='index'>{{item}}</text>
</template>
<text v-else :key='index' class="car_num-license"
:class="{'active': isActive === index, 'new-active':isActive === index && index === brand.length - 1 }"
@click.capture="onBrandClick" :data-index='index'>{{item}}</text>
</template>
</view>
然后是键盘的样式
<template v-if='show'>
<view class='keyboard' @click='handleClick'>
<!-- 省份 -->
<view class="keyboard-box" v-if="isShowProvinceSelect" @click.stop=''>
<view class="keyboard_head">
<text class="cancel" @click.stop='cancelHandler'> 取消</text>
<text @click.stop="submit">完成</text>
</view>
<view class="keyboard_box">
<text v-for="(item,index) in province" :key='index' @click.stop="provinceClick"
:data-item="item">{{item}}</text>
<view class="close" @click.stop="clearHandler">
<image src="/static/add_car_delete.png" mode="widthFix" style="width:60rpx;height:60rpx" />
</view>
</view>
</view>
<!-- 车牌 -->
<view class="keyboard-box" v-if="isShowBrandSelect" @click.stop=''>
<view class="keyboard_head">
<text class="cancel" @click.stop='cancelHandler'>取消</text>
<text @click.stop="submit">完成</text>
</view>
<view class="keyboard_box">
<text v-for="(item,index) in brand_code" :key='index' @click.stop="brandCodeHandler" :data-item="item"
:class="{'color1': !item.isShow }">{{ item.code }}</text>
<text @click.stop="clearHandler" class="delete">删除</text>
</view>
</view>
</view>
</template>
定义一些基础变量
props: {
value: { default: '', type: String },
},
data() {
return {
show: false,
isActive: 0,
brand: ['', '', '', '', '', '', '', '+'],
province: ['京', '津', '沪', '渝', '冀', '豫', '云', '辽', '黑', '湘', '皖', '鲁', '新', '苏', '浙', '赣', '鄂', '桂', '甘','晋', '蒙', '陕', '吉', '闽', '贵', '粤', '青', '藏', '川', '宁', '琼', '使', '无'],
brand_code: [{code: '1',isShow: true},{code: '2',isShow: true},{code: '3',isShow: true},{code: '4',isShow: true},{code: '5',isShow: true},{code: '6',isShow: true},{code: '7',isShow: true},{code: '8',isShow: true},{code: '9',isShow: true},{code: '0',isShow: true},{code: 'Q',isShow: true},{code: 'W',isShow: true},{code: 'E',isShow: true},{code: 'R',isShow: true},{code: 'T',isShow: true},{code: 'Y',isShow: true},{code: 'U',isShow: true},{code: 'O',isShow: false},{code: 'P',isShow: true},{code: '港',isShow: false},{code: 'A',isShow: true},{code: 'S',isShow: true},{code: 'D',isShow: true},{code: 'F',isShow: true},{code: 'G',isShow: true},{code: 'H',isShow: true},{code: 'J',isShow: true},{code: 'K',isShow: true},{code: 'L',isShow: true},{code: '澳',isShow: false},{code: 'Z',isShow: true},{code: 'X',isShow: true},{code: 'C',isShow: true},{code: 'V',isShow: true},{code: 'B',isShow: true},{code: 'N',isShow: true},{code: 'M',isShow: true},{code: '学',isShow: false},{code: '领',isShow: false}],
}
},
watch: {
value: {
deep: true,
immediate: true,
handler(newV, oldV) {
if (newV) {
// ...
for (let i = 0; i < newV.length; i++) {
this.brand[i] = newV[i]
this.$set(this.brand, i, newV[i])
}
}
},
},
},
点击输入框时,要选中当前输入框
// 点击输入框时,需要展示键盘,并且记录当前的点击
onBrandClick(e) {
this.isActive = e.currentTarget.dataset.index
this.show = true
},
显示键盘的时候,要根据用户输入来调整键盘的显示,以及禁用的按钮
computed: {
// 显示省份键盘
isShowProvinceSelect() {
return this.isActive === 0
},
// 数字字符键盘
isShowBrandSelect() {
// 当输入第二位开始
if(this.isActive <= 0) return false
// 第二位不能是数字
if(this.isActive === 1) {
// 正则校验数字
const reg = /^[0-9]*$/
this.brand_code.forEach(item => {
if(reg.test(item.code)) item.isShow = false
})
} else if(this.isActive === 6){
// 第6位的时候,只有字母 "O" 是不能点的
this.brand_code.forEach(item => {
if(item.code === 'O') {
item.isShow = false
} else {
item.isShow = true
}
})
} else {
// 其他情况,这5个都不能点
const arr = ['学', '澳', '领', '港', 'O']
this.brand_code.forEach(item => {
if(arr.includes(item.code)) {
item.isShow = false
} else {
item.isShow = true
}
})
}
return true
}
},
点击省份键盘和数字键盘
// 点击省份键盘
provinceClick(e) {
// 赋值,并且自动进入下一个输入框
this.brand[this.isActive++] = e.currentTarget.dataset.item
// 如果输入到最后一位,要 -1
this.isActive = this.isActive === this.brand.length ? this.isActive - 1 : this.isActive
},
// 点击数字字母键盘
brandCodeHandler(e) {
// 当前元素不可点击,直接return
if (!e.currentTarget.dataset.item.isShow) return
// 获取一下当前元素
const item = e.currentTarget.dataset.item
this.brand[this.isActive++] = item.code
this.isActive = this.isActive === this.brand.length ? this.isActive - 1 : this.isActive
},
关闭键盘及删除按钮的处理
// 点击外部元素的时候,关闭键盘,并且输入完毕
handleClick() {
// copy一份
const str = [...this.brand]
// 如果输入的不是新能源车牌,去掉最后一位
if (str[str.length - 1] === '+') str.pop()
// 回调
this.$emit('input', str.join(''))
// 关闭
this.show = false
},
// 删除
clearHandler() {
// 最后一位了, return
if ( this.isActive < 0 ) return
// 复原一下
this.brand[this.isActive--] = this.isActive === 6 ? '+' : ''
},
// 取消,初始化
cancelHandler() {
this.show = false
this.brand = ['', '', '', '', '', '', '', '+']
this.isActive = 0
this.$emit('input', '')
}
最后就是引用
// 页面上引入
import CarNum from '@/components/carNum/index.vue'
export default {
components: {
CarNum
},
}
// html v-model 双向绑定
<CarNum v-model='carNum'></CarNum>
该代码已上传至 HBuilder X插件市场
完整代码请看 码云
完。