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

 export let life = { created () { this.currentPlate = this.plateNumber console.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.firstWord let str2 = this.EnterPlateNumber.input.secondWord let str3 = this.EnterPlateNumber.input.lastWords this.$emit('clickSearch',str1+str2+str3) }, } export let watch = {}

 export default class { enterWord(){ // this.$emit('update:plateNumber', this.plateNumber1) } hiddenKeybord(val){ if(val===2){ console.log(this.currentPlate) this.plateNumber1 = this.currentPlate this.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 = false this.EnterPlateNumber.input.showAlb = false } if(val===1){ this.EnterPlateNumber.input.showProvince = false this.EnterPlateNumber.input.showAlb = false } } enterProv(val){ this.EnterPlateNumber.input.showProvince = val this.EnterPlateNumber.input.showAlb = false this.EnterPlateNumber.input.whitchKey = 0 } setKey(val){ this.EnterPlateNumber.input.whitchKey = val } async enterPro(val){ let isOk = false this.EnterPlateNumber.input.firstWord = val.provinceName if(this.EnterPlateNumber.input.firstWord!=''){ isOk = true } return isOk } deletePro(){ this.EnterPlateNumber.input.firstWord = '' } enterAlbn(val){ this.EnterPlateNumber.input.showAlb = val this.EnterPlateNumber.input.showProvince = false this.EnterPlateNumber.input.whitchKey = 1 } async enterAlb(val){ let isOk = 1 if(this.EnterPlateNumber.input.whitchKey === 1&typeof(val.AlbName)==='number'){ isOk = 1 return } if(this.EnterPlateNumber.input.whitchKey === 1){ isOk = 2 this.EnterPlateNumber.input.secondWord = val.AlbName } if(this.EnterPlateNumber.input.whitchKey === 2){ isOk = 3 let 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 = val this.EnterPlateNumber.input.showProvince = false this.EnterPlateNumber.input.whitchKey = 2 } async deleteAlb(){ let isOk = 0 if(this.EnterPlateNumber.input.whitchKey === 1){ this.EnterPlateNumber.input.secondWord = '' isOk = 1 } if(this.EnterPlateNumber.input.whitchKey === 2){ let len = this.EnterPlateNumber.input.lastWords.length this.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 } }

 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) } } }