前端实现车牌号输入框组件封装

已于 2023-08-03 14:09:42 修改
阅读量3.6k 收藏 8
点赞数 3
分类专栏： MP+H5+APP组件(全端支持) 文章标签： uni-app vue
于 2021-03-23 13:43:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42415827/article/details/115119745
版权 

<!-- 自定义的键盘弹框 -->
<template>
	<view v-if="showPopup" class="uni-popup">
		<view :class="[ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__mask" @click="close(true)" />
		<view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper" @click="close(true)">
			<view class="uni-popup__wrapper-box" style="border-radius: unset;" @click.stop="clear">
				<view class="title_outer flex_between">
					<view class="close_title" @click="close(true)">
						取消
					</view>
					<view class="center_title">
						请输入车牌号
					</view>
					<view class="cancle_title" @click="confirm">
						确定
					</view>
				</view>
				<view class="inp_outer flex_between">
					<block v-for="(inpitem,inpindex) in inplist" :key="inpindex">
						<view v-if="inpindex != 2" class="left_inp public_title flex_center_around" :class="{active : inpIndex == inpindex}"
						 @click="changeIndex(inpindex)">{{inpitem.title}}</view>
						<view v-else class="right_inp public_title flex_center_around" :class="{active : inpIndex == inpindex}" @click="changeIndex(inpindex)">{{inpitem.title}}</view>
					</block>
				</view>
				<view class="keyboard">
					<view class="flex_center">
						<view class="flex-row-wrap" style="width: 100%;">
							<block v-for="(item,index) in list" :key='index'>
								<view :class="{zmactive : index > 23 && inpIndex == 1}" class="keyboard_title flex_center_around" @click="cityTitle(item.title,index)">
									{{item.title}}
								</view>
							</block>
						</view>
					</view>
					<view class="close flex_center_around" @click="deleteTo()">
						<image class="close_img" src="/static/del.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'UniPopup',
		props: {
			// 开启动画
			animation: {
				type: Boolean,
				default: true
			},
			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
			type: {
				type: String,
				default: 'center'
			},
			// 是否开启自定义
			custom: {
				type: Boolean,
				default: false
			},
			// maskClick
			maskClick: {
				type: Boolean,
				default: true
			},
			show: {
				type: Boolean,
				default: true
			},
			gua: {
				type: Boolean,
				default: false
			} // 是否是挂车号
		},
		data() {
			return {
				ani: '',
				showPopup: false,
				list: [], // 显示渲染的列表
				citylist: [{
						title: '京'
					}, {
						title: '津'
					}, {
						title: '沪'
					}, {
						title: '渝'
					},
					{
						title: '冀'
					}, {
						title: '豫'
					}, {
						title: '云'
					}, {
						title: '辽'
					},
					{
						title: '黑'
					}, {
						title: '湘'
					}, {
						title: '皖'
					}, {
						title: '鲁'
					},
					{
						title: '新'
					}, {
						title: '苏'
					}, {
						title: '浙'
					}, {
						title: '赣'
					},
					{
						title: '鄂'
					}, {
						title: '桂'
					}, {
						title: '甘'
					}, {
						title: '晋'
					},
					{
						title: '蒙'
					}, {
						title: '陕'
					}, {
						title: '吉'
					}, {
						title: '闽'
					},
					{
						title: '贵'
					}, {
						title: '粤'
					}, {
						title: '青'
					}, {
						title: '藏'
					},
					{
						title: '川'
					}, {
						title: '宁'
					}, {
						title: '琼'
					}, {
						title: '澳'
					},
					{
						title: '台'
					}
				], // 车牌头部文字的列表
				zimulist: [{
						title: 'A'
					}, {
						title: 'B'
					}, {
						title: 'C'
					}, {
						title: 'D'
					},
					{
						title: 'E'
					}, {
						title: 'F'
					}, {
						title: 'G'
					}, {
						title: 'H'
					},
					{
						title: 'J'
					}, {
						title: 'K'
					}, {
						title: 'L'
					}, {
						title: 'M'
					},
					{
						title: 'N'
					}, {
						title: 'P'
					}, {
						title: 'Q'
					}, {
						title: 'R'
					},
					{
						title: 'S'
					}, {
						title: 'T'
					}, {
						title: 'U'
					}, {
						title: 'V'
					},
					{
						title: 'W'
					}, {
						title: 'X'
					}, {
						title: 'Y'
					}, {
						title: 'Z'
					},
					{
						title: '0'
					}, {
						title: '1'
					}, {
						title: '2'
					}, {
						title: '3'
					},
					{
						title: '4'
					}, {
						title: '5'
					}, {
						title: '6'
					}, {
						title: '7'
					},
					{
						title: '8'
					}, {
						title: '9'
					}, {
						title: '挂'
					}
				], // 车牌开头字母的列表
				// gualist:[], // 挂车号
				inplist: [{
					title: ''
				}, {
					title: ''
				}, {
					title: ''
				}], // 车牌号
				ary: [], // 三级框的数字和字母
				chehao: '', //最后显示的车牌号
				noorder: false, // 判断是否按顺序填写
				inpIndex: 0 // 获取车牌输入框的下表
			}
		},
		watch: {
			show(newValue) {
				if (newValue) {
					this.open()
				} else {
					this.close()
				}
			}
		},
		created() {},
		/**
		 * 模板渲染完成 节点操作
		 */
		mounted() {
			this.list = this.citylist
		},
		methods: {
			clear() {},
			// 控制弹框的显示
			open() {
				this.$emit('change', {
					show: true
				})
				this.list = this.citylist
				this.inpIndex = 0
				this.inplist = [{
					title: ''
				}, {
					title: ''
				}, {
					title: ''
				}]
				this.ary = []
				this.showPopup = true
				this.$nextTick(() => {
					setTimeout(() => {
						this.ani = 'uni-' + this.type
					}, 30)
				})
			},
			// 控制弹框的隐藏
			close(type) {
				if (!this.maskClick && type) return
				this.$emit('change', {
					show: false
				})
				this.ani = ''
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPopup = false
					}, 200)
				})
			},
			// 点击确定
			confirm() {
				for (let i = 0; i < this.inplist.length; i++) {
					if (!this.inplist[i].title && i < 2) {
						uni.showToast({
							title: "请填写正确的车牌号！",
							icon: "none"
						})
						return
					}
					if (i == 2) {
						if (this.inplist[2].title.length == 5) {
							this.chehao = this.inplist[0].title + this.inplist[1].title + this.inplist[2].title
							this.$emit('confirm', this.chehao)
						} else {
							uni.showToast({
								title: "请填写正确的车牌号！",
								icon: "none"
							})
						}
					}
				}
			},
			// 选择车牌号开头的字
			cityTitle(title, index) {
				if (this.inpIndex == 0) {
					this.inplist[0].title = title
					this.inpIndex = 1
					this.list = this.zimulist
					this.pandaun()
				} else if (this.inpIndex == 1 && index < 24) {
					this.inplist[1].title = title
					this.inpIndex = 2
					this.list = this.zimulist
					this.pandaun()
				} else if (this.inpIndex == 2) {
					if (this.inplist[2].title.length < 4 && index == 34) {
						// 阻止“挂”按键点击
						return
					}
					if (this.gua) {
						if (this.inplist[2].title.length < 4) {
							this.ary.push(title)
						}
						if (this.inplist[2].title.length == 4) {
							this.ary.push('挂')
							this.pandaun()
						}
					} else {
						if (index == 34) {
							// 阻止“挂”按键点击
							return
						}
						if (this.inplist[2].title.length < 5) {
							this.ary.push(title)
						}
						if (this.inplist[2].title.length == 5) {
							this.pandaun()
						}
					}

					this.inplist[2].title = this.ary.join("")
				} else {
					return
				}
			},
			// 判断是否点击三个输入框，没按顺序填写
			pandaun() {
				if (this.noorder) {
					for (let i = 0; i < this.inplist.length; i++) {
						if (!this.inplist[i].title) {
							this.inpIndex = i
							this.noorder = false
							if (this.inpIndex == 0) {
								this.list = this.citylist
							} else {
								this.list = this.zimulist
							}
							return
						}
					}
				}
			},
			// 删除操作
			deleteTo() {
				if (this.inpIndex == 0) {
					// this.inplist[0].title = ''
				} else if (this.inpIndex == 1) {
					this.inplist[0].title = ''
					this.inpIndex = 0
					this.list = this.citylist
				} else {
					if (this.inplist[2].title.length > 0) {
						this.ary.pop()
						this.inplist[2].title = this.ary.join("")
					} else {
						this.inplist[1].title = ''
						this.inpIndex = 1
						this.list = this.zimulist
					}
				}
			},
			// 点击车牌框
			changeIndex(index) {
				if (this.inpIndex != index) {
					if (index == 1 || index == 2) {
						this.list = this.zimulist
						this.inpIndex = index
						this.noorder = true
					} else {
						this.list = this.citylist
						this.inpIndex = index
						this.noorder = true
					}
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	/* flex布局 */
	.flex-row {
		display: flex;
		flex-direction: row;
	}

	/* flex布局,自动换行 */
	.flex-row-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	/* 水平两端对齐 */
	.flex_between {
		@extend .flex-row;
		justify-content: space-between;
	}

	/* 水平居中对齐 */
	.flex_center {
		@extend .flex-row;
		justify-content: center;
	}

	/* 水平平均垂直居中 */
	.flex_center_around {
		@extend .flex-row;
		justify-content: space-around;
		align-items: center;
	}

	.uni-popup {
		position: fixed;
		/*  #ifdef  H5 || APP-PLUS  */
		top: 0px;
		// top: 50px;
		/*  #endif  */
		/*  #ifndef  H5 || APP-PLUS  */
		top: 0px;
		/*  #endif  */
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99999;
		overflow: hidden;

		&__mask {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 998;
			background-color: rgba(0, 0, 0, 0.4);
			opacity: 0;

			&.ani {
				transition: all 0.3s;
			}

			&.uni-top,
			&.uni-bottom,
			&.uni-center {
				opacity: 1;
			}
		}

		&__wrapper {
			position: absolute;
			z-index: 999;
			box-sizing: border-box;

			&.ani {
				transition: all 0.3s;
			}

			&.top {
				top: 10%;
				left: 0;
				width: 100%;
				transform: translateY(-100%);
			}

			&.bottom {
				bottom: 0;
				left: 0;
				width: 100%;
				transform: translateY(100%);
			}

			&.center {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				transform: scale(1.2);
				opacity: 0;
			}

			&-box {
				position: relative;
				box-sizing: border-box;
			}

			&.uni-custom {
				& .uni-popup__wrapper-box {
					// padding: 30rpx;
					background-color: #fff;
				}

				&.center {
					& .uni-popup__wrapper-box {
						position: relative;
						max-width: 80%;
						max-height: 80%;
						overflow-y: scroll;
						border-radius: 10rpx;
					}
				}

				&.top,
				&.bottom {
					& .uni-popup__wrapper-box {
						width: 100%;
						max-height: 500px;
						overflow-y: scroll;
					}
				}

				&.bottom {
					& .uni-popup__wrapper-box {
						border-top-right-radius: 30rpx;
						border-top-left-radius: 30rpx;
					}
				}

				&.top {
					& .uni-popup__wrapper-box {
						border-bottom-right-radius: 30rpx;
						border-bottom-left-radius: 30rpx;
					}
				}
			}

			&.uni-top,
			&.uni-bottom {
				transform: translateY(0);
			}

			&.uni-center {
				transform: scale(1);
				opacity: 1;
			}
		}
	}

	.title_outer {
		padding: 30rpx;
		border-bottom: 1rpx solid #DEDEDE;

		.close_title {
			font-size: 34rpx;
		}

		.center_title {
			font-size: 34rpx;
		}

		.cancle_title {
			font-size: 34rpx;
			color: red;
		}
	}

	.inp_outer {
		margin: 20rpx 180rpx;

		.left_inp {
			width: 80rpx;
		}

		.right_inp {
			width: 190rpx;
		}

		.public_title {
			height: 80rpx;
			border-radius: 6rpx;
			border: 1rpx solid #DEDEDE;
			font-weight: bold;
			font-size: 34rpx;
		}

		.active {
			border: 1rpx solid red !important;
		}
	}

	.keyboard {
		background-color: #F1F1F1;
		width: 98%;
		margin-left: 1%;
		// margin: 5rpx 0;
		margin-bottom: 1%;
		position: relative;

		.keyboard_title {
			width: 16%;
			height: 80rpx;
			background-color: #FFFFFF;
			margin: 0.33%;
			box-shadow: 2rpx 2rpx 5rpx 2rpx #888888;
			border-radius: 8rpx;
		}

		.keyboard_title:active {
			background-color: #AAAAAA;
			opacity: 0.5; //这里重要，就是通过这个透明度来设置
		}

		.zmactive {
			color: #999999;
			background-color: #F1F1F1;
		}

		.close {
			width: 16%;
			height: 80rpx;
			background-color: #FFFFFF;
			box-shadow: 2rpx 2rpx 5rpx 2rpx #888888;
			border-radius: 8rpx;
			position: absolute;
			bottom: 0.33%;
			right: 0.33%;

			.close_img {
				width: 50rpx;
			}
		}
	}
</style>

使用案例

<template>
	<view class="box_w94_p3">
		<!-- 车牌号 -->
		<view class="insure-table" @click="showCarNumberKeyboard">
			<view class="insure-title">车牌号码</view>
			<view class="insure-input">
				<input type="text" disabled="" placeholder="格式:云A88888" placeholder-class="inputcss" v-model="car_number" />
			</view>
			<view class="choose-tab">
				<view class="uni-input">选择</view>
			</view>
		</view>
		<sun-carNumber ref="popupCarNumber" type="bottom" @confirm="confirmCarNumber" :gua="false"></sun-carNumber>

		<!-- 挂车编号 -->
		<view class="insure-table" @click="showGuaCarNumberKeyboard">
			<view class="insure-title">挂车编号</view>
			<view class="insure-input">
				<input type="text" disabled="" placeholder="格式:云A88888挂" placeholder-class="inputcss" v-model="trailer_number" />
			</view>
			<view class="choose-tab">
				<view class="uni-input">选择</view>
			</view>
		</view>
		<sun-carNumber ref="popupGuaCarNumber" type="bottom" @confirm="confirmGuaCarNumber" :gua="true"></sun-carNumber>
	</view>
</template>

<script>
	export default {
		name: 'carNumber',
		/**
		 * data函数作数据绑定
		 */
		data() {
			return {
				car_number: '',
				trailer_number: ''
			}
		},
		/**
		 * 方法函数
		 */
		methods: {
			// 显示车牌号选择框
			showCarNumberKeyboard() {
				this.$refs.popupCarNumber.open()
			},
			// 车牌号选择键盘
			confirmCarNumber(value) {
				this.car_number = value
				this.$refs.popupCarNumber.close()
			},
			// 显示挂车选择框
			showGuaCarNumberKeyboard() {
				this.$refs.popupGuaCarNumber.open()
			},
			// 挂车号选择键盘
			confirmGuaCarNumber(value) {
				this.trailer_number = value
				this.$refs.popupGuaCarNumber.close()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.insure-table {
		height: 100upx;
		/* background: #07C160; */
		display: flex;
		align-items: center;
		width: 100%;
		border-bottom: 1px solid #EEEEEE;
	}

	.insure-title {
		width: 230upx;
		/* background: #007aff; */
		font-size: 30upx;
		font-weight: bold;
		color: #555555;
	}

	.insure-input {
		width: 100%;
		font-size: 30upx;
		color: #333333 !important;
	}

	.insure-input view {
		font-size: 28upx;
	}

	.choose-tab {
		position: absolute;
		right: 20upx;
		width: 100upx;
		height: auto;
		padding: 6upx 0;
		font-size: 28upx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 6upx;
		background: #07C160;
	}
</style>

sun_lz.
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
uniapp(全端兼容) - 最新详细实现车牌号扫描识别功能，本地上传或手机拍照上车图片并识别车牌号及颜色等信息，uniapp接入百度OCR识别功能，利用ocr识别车牌号码（详细示例代码，一键复制即用
高级前端工程师
06-01 3416
uni-app，车牌号识别，百度OCR识别，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，ocr识别车牌，uniApp百度ocr识别车牌号，uniapp识别汽车车牌号，如何识别汽车车牌号码，怎么实现拍照后识别车辆号牌，小程序端ocr识别汽车车牌，UniAPP离线车牌实时扫描识别，uni-app 微信小程序 身份证 车牌号 拍照识别OCR插件的使用和配置，百度车牌识别调用，车牌扫描_扫描识别车牌号码_实现扫描识别车牌号码，扫车牌号识别功能，详
车牌号前两位选择插件
weixin_39319246的博客
07-12 1162
//html 内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
vue 车牌号输入专用键盘
04-19
vue 车牌号输入专用键盘， 提供输入框自定义插槽、只读等功能
自定义键盘和车牌号输入框
11-10
自定义键盘和车牌号输入框
微信小程序车牌号输入组件（虚拟键盘）
李水灵的博客
12-03 6290
本文参考 微信小程序中实现车牌输入功能， 进行了更加细致的键盘划分、删除等功能 文中给出代码都是截图，完整代码在文末贴出。 组件效果 组件功能： 其中虚拟键盘、新能源车牌等功能均可使用 封装成一个组件可以直接 Import 使用 可以给定默认初始值（如 gif 中所示） 父组件通过 change 事件可以监听到车牌号每一次的变化 组件部分样式也可以给定 class 来自定义 可以规范用户输入车牌号，防止乱输引起的数据库错乱 组件思路 根据车牌号的规则，根据不同的第几位生成键盘 例如：第一位为省.
车牌输入框 封装 （小程序 vue)
estrusKing的博客
05-05 1058
车牌输入框 封装。
【vue element-ui 车牌号选择组件】
shm5945的博客
08-03 1141
【代码】【无标题】
html车牌输入框,车牌号码输入框——Label的inputView
weixin_39926749的博客
06-08 1113
效果图图比较慢..稍等哈.gif思路车牌号码输入的部分都是UILabel,每个label显示一个文字。弹出键盘通过重写UILabel的inputView来实现。关于inputViewUITextField的两个属性// Presented when object becomes first responder. If set to nil, reverts to following respon...
layui实现车牌号输入框
06-06
本篇文章将详细讲解如何利用layui实现车牌号输入框，并特别关注对新能源车牌的支持。 首先，layui是一个轻量级、模块化的前端框架，它提供了丰富的UI组件，如表格、表单、按钮、弹窗等，使得开发者可以快速搭建界面...
小程序车牌号输入组件 车牌号键盘 兼容新能源号牌
12-02
1. **视图层（View Layer）**：这是用户可以看到和交互的部分，如键盘的布局和车牌号输入框的设计。 2. **逻辑层（Logic Layer）**：负责处理用户的输入，包括事件监听、数据验证和状态管理。 3. **样式表（Style...
车牌输入框用于输入车牌号码
06-10
在实现这些功能时，开发者通常会使用前端框架如React、Vue或Angular，结合CSS样式和JavaScript脚本来创建车牌输入框组件。同时，后端也需要配合进行数据校验，以确保入库的数据准确无误。 在压缩包中的"chepai"文件...
车牌号码自定义输入框，并且验证包含新能源
02-11
车牌号码自定义输入框，并且验证包含新能源
车牌控件jQuery+js
12-12
jQuery+js移动端输入框键盘键入车牌号码特效源码，配置即可用
vue车牌号输入键盘.zip
08-13
vue项目中的输入车牌号，支持中间的车牌号随意更改，支持新能源汽车。样式更改比较简单，将键盘封装成组件，引入到项目中就行，图片放img 里了，路径需要自己调整。
手机端车牌号码键盘的vue组件
deng_zhihao692817的专栏
07-01 1641
源码在https://github.com/Pinenutss/LicensePlate
基于Vue3和anta的拖拽模态框组件实现车牌号输入功能
最新发布
weixin_61662162的博客
09-14 831
创建一个拖拽模态框组件，其中包含一个显示车牌键盘的区域和一个确定按钮。使用Ant Design Vue组件库的DragModal组件来实现拖拽功能，并设置相关样式。在车牌键盘区域内，使用Vue的v-for指令遍历键盘按键，并为每个按键添加点击事件。在确定按钮上添加点击事件，用于提交输入的车牌号。使用Vue的响应式数据机制，监听车牌号的变化，并在变化时更新视图。
微信小程序使用车牌号输入法
ZJW222的博客
08-19 2393
在做小程序时，做了一个关于车的项目，然后需要添加车辆信息、添加车牌号，使用车牌键盘输入，当时我把这个需求给砍了，然后在添加车辆信息时，老大看到数据库里我乱填的车牌号，又让我把他加上了^o^ 1.效果图 2.相关代码 使用组件形式实现键盘输入 组件代码index.wxml <view class="carPlate" wx:if="{{show}}"> <bloc...
自己项目中添加停车王车牌号输入控件及键盘遇到的问题
冯开心吖的博客
07-11 1784
在项目集成之前先添加依赖 //车牌键盘 implementation 'com.parkingwang:keyboard:0.7.3' 页面布局 <com.parkingwang.keyboard.view.InputView style="@style/PWKInputViewStyle" android:layout_width="match_pare...
Android 自定义车牌输入框
weixin_36677647的博客
08-03 4089
需求自定义车牌输入框，可以动态添加输入框个数，7位正常车牌，8位新能源车牌。点击可修改输入过的车牌号码，附带点中效果。此输入框是基于一个方框样式的EditText，按照实际需求进行扩展的。现已更新至 GitHub，可直接依赖。传送门-&gt; LicensePlateUtil ，喜欢的给点个星，谢谢啦。。。动态效果如下：实现思路： 1.用一个透明的 EditText 与 8 个 TextVie...
用vue封装一个h5的车牌号输入框
03-29
车牌号输入框是一个常见的H5组件，下面是一个基于Vue的车牌号输入框的示例代码： ```html export default { name: 'LicensePlate', data() { return { province: '', city: '', number: '', }...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sun_lz.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值