vue车牌号码输入键盘，简单易懂

网上找了好多，都没找到合适的vue版车牌号输入键盘，就自己写了一个。

<template><div class="car-number">  <div class="pop"><div class="title"><span v-for="(item,index) in textList" :key="index">{{item}}</span> <i @click="colse" class="iconfont icon-quxiao"></i></div><div class="pro flx-w"><span v-for="(item,index) in items" :key="index" @click="add(item.text)">{{item.text}}</span></div><div class="pro flx-w"><span v-for="(item,index) in nums" :key="index" @click="add(item.num)">{{item.num}}</span></div><div class="pro flx-w"><span v-for="(item,index) in letters" :key="index" @click="add(item.let)">{{item.let}}</span></div><div class="pro flx-w del"><span v-for="(item,index) in letters02" :key="index" @click="add(item.let)">{{item.let}}</span></div><p @click="del()">删除 <i class="iconfont icon-tuige"></i></p><div class="confirm" @click="btnCar"><span>确定</span></div></div></div>
</template>

import {isLicensePlate} from '@/utils/utils'
export default {data(){return {items: [{text:'京'},{text:'津'},{text:'冀'},{text:'晋'},{text:'蒙'},{text:'辽'},{text:'吉'},{text:'黑'},{text:'沪'},{text:'苏'},{text:'浙'},{text:'皖'},{text:'闽'},{text:'赣'},{text:'鲁'},{text:'豫'},{text:'鄂'},{text:'湘'},{text:'粤'},{text:'桂'},{text:'琼'},{text:'渝'},{text:'川'},{text:'贵'},{text:'云'},{text:'藏'},{text:'陕'},{text:'甘'},{text:'青'},{text:'宁'},{text:'新'},{text:'港'},{text:'澳'},{text:'警'},{text:'学'},{text:'挂'},{text:'领'},{text:'使'}],nums:[{num:1},{num:2},{num:3},{num:4},{num:5},{num:6},{num:7},{num:8},{num:9},{num:0}],letters:[{let: 'A'},{let: 'B'},{let: 'C'},{let: 'D'},{let: 'E'},{let: 'F'},{let: 'G'},{let: 'H'},{let: 'J'},{let: 'K'},],letters02: [{let: 'L'},{let: 'M'},{let: 'N'},{let: 'P'},{let: 'Q'},{let: 'R'},{let: 'S'},{let: 'T'},{let: 'U'},{let: 'V'},{let: 'W'},{let: 'X'},{let: 'Y'},{let: 'Z'}],textList: ['豫']}},methods: {add(td){ //添加车牌const reg = /[\u4e00-\u9fa5]/g //汉字if(this.textList.length>7){this.$toast('车牌号码长度错误')}else{if(this.textList!='' && this.textList[0]!='' && reg.test(td)){this.$toast('只能有一个归属省份')}else{this.textList.push(td)if(!reg.test(this.textList[0])){this.$toast('请先选择省份')this.textList = []}}}},del(){ //删除const index = this.textList.length-1this.textList.splice(index,1)},btnCar(){ //把车牌号传递给父组件let lists = this.textList.join('') //把数组转换成字符串let vefy = isLicensePlate(lists)if(vefy === false){this.$toast('车牌号输入错误')}else{this.$emit('btnText',lists)this.colse()}},colse(){  //关闭键盘this.$emit('btnShow',false)}},
}

<style lang="less" scoped>.car-number{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 100;background: rgba(0,0,0,.6);.title{letter-spacing: 0.03rem;margin-bottom:0.2rem ;height: 0.7rem;border-bottom: 0.02rem solid #01be6e;span{font-weight: bold;font-size: 0.38rem;padding-bottom: 0.18rem;display: inline-block;}i{font-size: 0.56rem;color: #a8a8a8;display: block;position:absolute;top: 0.1rem;right: 0.15rem;}}.pop{position: fixed;bottom: 0.3rem;left: 0.15rem;right: 0.15rem;z-index: 1000;background: #fff;border-radius: 0.16rem;padding: 0.3rem 0.2rem 0.3rem 0.25rem;text-align: center;.pro>span:active{background: #01be6e;color: #fff;}.pro{display: flex;justify-content: flex-start;flex-wrap:wrap;align-items: center;margin: 0.1rem 0 ;span{display: inline-block;height: 0.55rem;line-height: 0.55rem;width: 0.55rem;background: #e4e4e4;border-radius: 0.06rem;text-align: center;margin: 0.1rem 0.06rem;font-size: 0.3rem;cursor: pointer;box-shadow: 0 0 0.03rem #7a7a7a;}}.del{margin-right: 25%;margin-top: -0.1rem;}p:active{background: #ff2b2bef !important;color: #fff !important;i:active{color: #ffffff !important;}}p{float: right;background: #DBDBDB;border-radius: 0.08rem;text-align: center;width: 26%;margin-top:-1.5rem ;margin-right: 0.12rem;height: 1.3rem;line-height: 1.3rem;vertical-align: middle;cursor: pointer;i{font-size: 0.35rem;color: #8a8a8a;}}.confirm{height: 0.75rem;line-height: 0.75rem;width: 100%;background: #01be6e;border-radius: 0.12rem;box-shadow: 0 0 0.08rem rgb(163, 163, 163);cursor: pointer;color: #fff;letter-spacing: 0.1rem;margin: 0.3rem 0 0.2rem;}}}

写的不好的对方，请大家指正！

vue车牌号码输入键盘，简单易懂相关推荐

VUE中自定义一个获取输入车牌号码组件
VUE自定义一个组件来选择输入车牌号码展示样式: 组件事件列表: 事件名称 event 获取车牌 @carNum 返回参数是个数组,每个车牌元素上代码: <template><d ...
手机端车牌号码键盘的vue组件
手机端车牌号码键盘的vue组件源码在 https://github.com/Pinenutss/... 欢迎给星星~~
微信小程序实现输入车牌号码的功能vue版（附效果图）
1,车牌第一位时选择录入图: 2,输入车牌第二位及后面的号码选择图 3 ,换普通车牌图下面是完整代码 <template><view class="container&q ...
python的快车智能车牌号码识别系统的开发
It is not always possible to prove some crimes. To achieve this, modern tools may be needed which mu ...
C语言：简易商品库存管理系统（简单易懂，不用指针的入门级示例，数据结构大作业）
C语言:商品库存管理系统(简单易懂,不用指针的入门级示例) 没有使用指针,没有写入文件,全部是最基础的c语言语句,本程序使用vc6.0测试功能: 1.创建商品的信息 2.显示全部商品对信息(商品数量 ...
《熟练掌握OpenCV----实用计算机视觉工程案例》第5章车牌号码识别
人工智能系列经典图书翻译原名:<Mastering OpenCV with Practical Computer Vision Projects> 作者:Shervin Em ...
Regex:身份证号码和车牌号码正则表达式
实名认证时,常会用到身份证号码和车牌号码的正则表达式匹配验证.简单高效. 经过一次一次的测试,去除多种匹配的表达式,得出相对正确的正则表达式. 1.车牌号正则匹配车牌号组成规则 1.民用常规车牌号 ...
使用PYTHON图像识别实现车牌号码识别的代码
实现车牌号码识别的代码是需要一定的图像处理知识和编程技巧的,下面是一份简单的实现车牌号码识别的代码示例: ``` import cv2 import numpy as np 读取图像 img = cv ...
亲测简单易懂可用:阿里云OSS入门实战2(集成到SpringBoot项目中存放用户头像)
亲测简单易懂可用:阿里云OSS入门实战2(集成到SpringBoot项目中存放用户头像) 大噶好,我们继续延续上一章,学习如何使用OSS存放用户头像代码示例; 在application.propert ...

vue车牌号码输入键盘，简单易懂

vue车牌号码输入键盘，简单易懂相关推荐

最新文章

热门文章