vue车牌搜索组件使用方法详解 vue车牌搜索组件使用方法详解

一个简单的车牌输入组件（vue），供大家参考，具体内容如下

文章图片

【vue车牌搜索组件使用方法详解】代码：
vue代码：

.enterPlate{height: 70rpx; background: #fff; padding:10rpx 20rpx; display: flex; align-items: center; .enterBox{width: 73%; display: flex; .isEntering{border-color: rgb(57,195,153); }div{width: 70rpx; height: 70rpx; line-height: 75rpx; border:1.5rpx solid rgba(0,0,0,0.15); border-radius: 10rpx; background: #fff; margin-right: 20rpx; font-size: 30rpx; text-align: center; }.plate{width: 300rpx; height: 70rpx; text-align: left; text-indent: 10rpx; }}.doneBox{width: 27%; display: flex; justify-content: space-between; align-items: center; .doneRight{display: flex; flex-direction: column; justify-content: center; align-items: center; }}button{height: 70rpx; padding:0 10rpx; line-height: 70rpx; }}.pulls{// padding: 0 0 20rpx 0; background: #fff; .name{height: 60rpx; line-height: 60rpx; font-size: 28rpx; color:rgba(0,0,0,0.85); // font-weight: bold; }.plateBOx{height: 100rpx; display: flex; justify-content: space-between; .pLeft{width: 50%; height: 100rpx; overflow: hidden; img{width: 100%; }}.pRight{width: 50%; height: 100rpx; padding-left: 10rpx; border:1rpx solid rgb(57,195,153); display: flex; align-items: center; .late{font-weight: bold; font-size: 30rpx; width: 60%; height: 100rpx; line-height: 100rpx; input{height: 100%; }}button{border:1rpx solid rgb(57,195,153); }}}.MASK{position: fixed; bottom: 0; left: 0; z-index: 9999; }// 键盘.keyboard{position:fixed; bottom:0; left:0; background-color:#ced2d9; width:100%; height:360rpx; margin:0; padding:0; font-size:36rpx; z-index:1; }.keyboard li {list-style:none; border-radius:10rpx; }.keyboard li {float:left; background-color:#fefefe; margin-left:15rpx; margin-top:15rpx; }.province{position: relative; .btns{width: 100vw; height: 70rpx; background: #fff; border-top:1rpx solid rgba(0,0,0,0.05); position: absolute; display: flex; justify-content: space-between; align-items: center; top: -70rpx; left: 0; button{margin:0; }}}.provinces{position: relative; .btns{width: 100vw; height: 70rpx; background: #fff; border-top:1rpx solid rgba(0,0,0,0.05); position: absolute; display: flex; justify-content: space-between; align-items: center; top: -428rpx; left: 0; button{margin:0; }}}.province li{width:calc((100% - 15rpx * 11) / 10); height:calc((100% - 15rpx * 5) / 4); display:flex; display:-webkit-flex; align-items:center; -webkit-align-items:center; justify-content: center; -webkit-justify-content: center; }.province li.delete{width:calc((100% - 15rpx * 11) / 10 * 2 + 15rpx); }.province li.deletes{width:calc((100% - 15rpx * 11) / 10 * 2 + 155rpx); }.disabled{color: rgba(0,0,0,0.15); }}

event事件：

export let life = {created () {this.currentPlate = this.plateNumberconsole.log(this.plateNumber)this.EnterPlateNumber.input.firstWord = this.plateNumber.slice(0,1)this.EnterPlateNumber.input.secondWord = this.plateNumber.slice(1,2)this.EnterPlateNumber.input.lastWords = this.plateNumber.slice(2,9)}}export let event = {toSearch(){this.methods('hiddenKeybord',2)this.$emit('confirmChangePlate')},changePlate(){//展示键盘this.methods('changePlate')this.methods('saveOringinPlate')},//取消hiddenKeybord(){this.methods('hiddenKeybord',2)},//确定enterWord(){this.methods('enterWord')this.methods('hiddenKeybord',1)},//修改confirmChangePlate(){this.$emit('confirmChangePlate')},//点击省份输入框enterProv(){this.methods('enterProv',true)},//点击省份async enterPro(item){let isOk = await this.methods('enterPro',item)if(isOk){this.methods('enterAlbn',true)}},//删除省份deletePro(){this.methods('deletePro')},//点击字母输入框enterAlbn(){this.methods('enterAlbn',true)},//点击数字async enterAlb(item){let isOk = await this.methods('enterAlb',item)if(isOk===2){this.methods('setKey',2)}},//数字键盘的删除async deleteAlb(){let isOk = await this.methods('deleteAlb')if(isOk === 1){this.methods('setKey',0)this.methods('enterProv',true)this.EnterPlateNumber.input.firstWord = ''}if(isOk===2){this.methods('setKey',2)// this.methods('enterAlbn',true)}if(isOk===3){this.methods('setKey',1)// this.methods('enterAlbn',true)this.EnterPlateNumber.input.secondWord = ''}},//点击剩余字母框enterLastn(){this.methods('enterLastn',true)},//搜索clickSearch(){let str1 = this.EnterPlateNumber.input.firstWordlet str2 = this.EnterPlateNumber.input.secondWordlet str3 = this.EnterPlateNumber.input.lastWordsthis.$emit('clickSearch',str1+str2+str3)},}export let watch = {}

methods方法：

export default class {enterWord(){// this.$emit('update:plateNumber', this.plateNumber1)}hiddenKeybord(val){if(val===2){console.log(this.currentPlate)this.plateNumber1 = this.currentPlatethis.EnterPlateNumber.input.firstWord = this.currentPlate.slice(0,1)this.EnterPlateNumber.input.secondWord = this.currentPlate.slice(1,2)this.EnterPlateNumber.input.lastWords = this.currentPlate.slice(2,9)this.EnterPlateNumber.input.showProvince = falsethis.EnterPlateNumber.input.showAlb = false}if(val===1){this.EnterPlateNumber.input.showProvince = falsethis.EnterPlateNumber.input.showAlb = false}}enterProv(val){this.EnterPlateNumber.input.showProvince = valthis.EnterPlateNumber.input.showAlb = falsethis.EnterPlateNumber.input.whitchKey = 0}setKey(val){this.EnterPlateNumber.input.whitchKey = val}async enterPro(val){let isOk = falsethis.EnterPlateNumber.input.firstWord = val.provinceNameif(this.EnterPlateNumber.input.firstWord!=''){isOk = true}return isOk}deletePro(){this.EnterPlateNumber.input.firstWord = ''}enterAlbn(val){this.EnterPlateNumber.input.showAlb = valthis.EnterPlateNumber.input.showProvince = falsethis.EnterPlateNumber.input.whitchKey = 1}async enterAlb(val){let isOk = 1if(this.EnterPlateNumber.input.whitchKey === 1&typeof(val.AlbName)==='number'){isOk = 1return}if(this.EnterPlateNumber.input.whitchKey === 1){isOk = 2this.EnterPlateNumber.input.secondWord = val.AlbName}if(this.EnterPlateNumber.input.whitchKey === 2){isOk = 3let str = val.AlbName.toString()if(this.EnterPlateNumber.input.lastWords.length>5){uni.showToast({icon: "none",duration: 1000,position: 'top',title: "车牌号码最长不可超过8位",})return}else{this.EnterPlateNumber.input.lastWords+=str}}return isOk}enterLastn(val){this.EnterPlateNumber.input.showAlb = valthis.EnterPlateNumber.input.showProvince = falsethis.EnterPlateNumber.input.whitchKey = 2}async deleteAlb(){let isOk = 0if(this.EnterPlateNumber.input.whitchKey === 1){this.EnterPlateNumber.input.secondWord = ''isOk = 1}if(this.EnterPlateNumber.input.whitchKey === 2){let len = this.EnterPlateNumber.input.lastWords.lengththis.EnterPlateNumber.input.lastWords = this.EnterPlateNumber.input.lastWords.substr(0, this.EnterPlateNumber.input.lastWords.length - 1)len--console.log(len)if(len===-1){if(this.EnterPlateNumber.input.lastWords===''){isOk = 3}else{isOk = 2}}}return isOk}switchColorSelector () {this.selectVisible = !this.selectVisible}setColor (color) {this.currentColor = color}}

model数据：

export let props = ['name','plateNumber','noRightPart']export let model = {currentPlate:undefined,EnterPlateNumber:{input:{firstWord:'',secondWord:'',lastWords:'',provinceList:[{provinceName:'京',id:'京'},{provinceName:'津',id:'津'},{provinceName:'冀',id:'冀'},{provinceName:'晋',id:'晋'},{provinceName:'蒙',id:'蒙'},{provinceName:'辽',id:'辽'},{provinceName:'吉',id:'吉'},{provinceName:'黑',id:'黑'},{provinceName:'沪',id:'沪'},{provinceName:'苏',id:'苏'},{provinceName:'浙',id:'浙'},{provinceName:'皖',id:'皖'},{provinceName:'闽',id:'闽'},{provinceName:'赣',id:'赣'},{provinceName:'鲁',id:'鲁'},{provinceName:'豫',id:'豫'},{provinceName:'鄂',id:'鄂'},{provinceName:'湘',id:'湘'},{provinceName:'粤',id:'粤'},{provinceName:'桂',id:'桂'},{provinceName:'琼',id:'琼'},{provinceName:'渝',id:'渝'},{provinceName:'川',id:'川'},{provinceName:'贵',id:'贵'},{provinceName:'云',id:'云'},{provinceName:'藏',id:'藏'},{provinceName:'陕',id:'陕'},{provinceName:'甘',id:'甘'},{provinceName:'青',id:'青'},{provinceName:'宁',id:'宁'},{provinceName:'新',id:'新'},{provinceName:'台',id:'台'},{provinceName:'港',id:'港'},{provinceName:'澳',id:'澳'},{provinceName:'使',id:'使'},{provinceName:'领',id:'领'},{provinceName:'警',id:'警'},{provinceName:'学',id:'学'},],plateAlbList:[{AlbName:0,id:'0',isNumber:true},{AlbName:1,id:'1',isNumber:true},{AlbName:2,id:'2',isNumber:true},{AlbName:3,id:'3',isNumber:true},{AlbName:4,id:'4',isNumber:true},{AlbName:5,id:'5',isNumber:true},{AlbName:6,id:'6',isNumber:true},{AlbName:7,id:'7',isNumber:true},{AlbName:8,id:'8',isNumber:true},{AlbName:9,id:'9',isNumber:true},{AlbName:'A',id:'A',isNumber:false},{AlbName:'B',id:'B',isNumber:false},{AlbName:'C',id:'C',isNumber:false},{AlbName:'D',id:'D',isNumber:false},{AlbName:'E',id:'E',isNumber:false},{AlbName:'F',id:'F',isNumber:false},{AlbName:'G',id:'G',isNumber:false},{AlbName:'H',id:'H',isNumber:false},{AlbName:'J',id:'J',isNumber:false},{AlbName:'K',id:'K',isNumber:false},{AlbName:'L',id:'L',isNumber:false},{AlbName:'M',id:'M',isNumber:false},{AlbName:'N',id:'N',isNumber:false},{AlbName:'P',id:'P',isNumber:false},{AlbName:'Q',id:'Q',isNumber:false},{AlbName:'R',id:'R',isNumber:false},{AlbName:'S',id:'S',isNumber:false},{AlbName:'T',id:'T',isNumber:false},{AlbName:'U',id:'U',isNumber:false},{AlbName:'V',id:'V',isNumber:false},{AlbName:'W',id:'W',isNumber:false},{AlbName:'X',id:'X',isNumber:false},{AlbName:'Y',id:'Y',isNumber:false},{AlbName:'Z',id:'Z',isNumber:false},{AlbName:'学',id:'学',isNumber:false},{AlbName:'港',id:'港',isNumber:false},{AlbName:'澳',id:'澳,isNumber:false'}],showProvince:false,//展示省份showAlb:false,//展示字母键盘whitchKey:0}},selectVisible: false,}export let computed = {plateNumber1 : {get () {return this.plateNumber||''},set (val) {this.$emit('update:plateNumber', val)}}}

因为这里用了独家的框架，所以根据需要把相应的生命周期函数放到正常的vue项目的位置，把event就写成正常的函数，methods就是i正常的methods里面的方法，model就是data里return的数据
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。