Shulou(Shulou.com)06/03 Report--

How to use the vue license plate search component? in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

A simple license plate input component (vue), for your reference, the details are as follows

Code:

Vue Code:

{{EnterPlateNumber.input.firstWord}} {{EnterPlateNumber.input.secondWord}} {{EnterPlateNumber.input.lastWords}} search filter canceled Confirm {{item.provinceName}}  deletion cancel confirm { {item.AlbName}} {{item.AlbName}}  delete .enterPlate {height: 70rpx Background: # fff; padding:10rpx 20rpx; display: flex; align-items: center; .enterBox {width: 73%; display: flex; .isEntering {border-color: rgb (57195153);} div {width: 70rpx; height: 70rpx; line-height: 75rpx; border:1.5rpx solid rgba Background: # fff; margin-right: 20rpx; font-size: 30rpx; text-align: center;} .plate {width: 300rpx; height: 70rpx; text-align: left; text-indent: 10rpx;}} .roomBox {width: 27%; display: flex; justify-content: space-between Align-items: center; .vertical right {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; / / 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 (57195153); 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 (57195153);} .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;} .keyboard {position: relative; .btns {width: 100vw; height: 70rpx Background: # fff; border-top:1rpx solid rgba; 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; position: absolute; display: flex; justify-content: space-between; align-items: center Top:-428rpx; left: 0; button {margin:0;} .roomli {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;} .roomli.delete {width:calc ((100%-15rpx * 11) / 10 * 2 + 15rpx);} .roomli.deletes {width:calc ((100%-15rpx * 11) / 10 * 2 + 155rpx) }. Color: rgba (0memo 0re0pl 0.15)

Event event:

Export let life = {created () {this.currentPlate = this.plateNumber console.log (this.plateNumber) this.EnterPlateNumber.input.firstWord = this.plateNumber.slice (0Magne1) this.EnterPlateNumber.input.secondWord = this.plateNumber.slice (1mem2) this.EnterPlateNumber.input.lastWords = this.plateNumber.slice (2mem9)}} export let event = {toSearch () {this.methods ('hiddenKeybord',2) this.$emit (' confirmChangePlate')} ChangePlate () {/ / display keyboard this.methods ('changePlate') this.methods (' saveOringinPlate')}, / / cancel hiddenKeybord () {this.methods ('hiddenKeybord',2)}, / / confirm enterWord () {this.methods (' enterWord') this.methods ('hiddenKeybord',1)}, / / modify confirmChangePlate () {this.$emit (' confirmChangePlate')} / Click the province input box enterProv () {this.methods ('enterProv',true)}, / / Click the province async enterPro (item) {let isOk = await this.methods (' enterPro',item) if (isOk) {this.methods ('enterAlbn',true)}}, / / delete the province deletePro () {this.methods (' deletePro')} / / Click the letter input box enterAlbn () {this.methods ('enterAlbn',true)}, / / Click the number async enterAlb (item) {let isOk= await this.methods (' enterAlb',item) if (isOk===2) {this.methods ('setKey',2)}} / / deletion of numeric keypad 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 ='}}, / / Click the remaining letter box enterLastn () {this.methods ('enterLastn',true)} / / search for 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 = {}

Methods method:

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 (0Magne1) this.EnterPlateNumber.input.secondWord = this.currentPlate.slice (1Magne2) this.EnterPlateNumber.input.lastWords = this.currentPlate.slice (2Magne9) 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.Entertainment Number.input.firstWordwordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordWordNumber.input.FirstWordWordWordNumber.input.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: "the license plate number should not exceed 8 digits at most" }) 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}}

Model data:

Export let props = ['name','plateNumber','noRightPart'] export let model = {currentPlate:undefined, EnterPlateNumber: {input: {firstWord:'', secondWord:'', lastWords:'', provinceList: [{provinceName:' Beijing', id:' Beijing'}, {provinceName:' Tianjin', id:' Tianjin'}, {provinceName:' Ji', id:' Ji'}, {provinceName:' Jin' Id:' Jin'}, {provinceName:' Mongolia', id:' Mongolia'}, {provinceName:' Liao', id:' Liao'}, {provinceName:' Ji', id:' Ji'}, {provinceName:' Black', id:' Black'}, {provinceName:' Shanghai', id:' Shanghai'}, {provinceName:' Su', id:' Su'}, {provinceName:' Zhejiang' Id:' Zhejiang'}, {provinceName:' Anhui', id:' Anhui'}, {provinceName:' Fujian', id:' Fujian'}, {provinceName:' Gan', id:' Gan'}, {provinceName:' Lu', id:' Lu'}, {provinceName:' Yu', id:' Yu'}, {provinceName:' E', id:' E'}, {provinceName:' Xiang' Id:' Xiang'}, {provinceName:' Yue', id:' Yue'}, {provinceName:' Gui', id:' Gui'}, {provinceName:' Qiong', id:' Qiong'}, {provinceName:' Yu', id:' Yu'}, {provinceName:' Chuan', id:' Chuan'}, {provinceName:' expensive', id:' expensive'}, {provinceName:' Cloud' Id:' Cloud'}, {provinceName:' Tibet', id:' Tibet'}, {provinceName:' Shan', id:' Shan'}, {provinceName:' Gan', id:' Gan'}, {provinceName:' Qing', id:' Qing'}, {provinceName:' Ning', id:' Ning'}, {provinceName:' New', id:' New'}, {provinceName:'' Id:''}, {provinceName:'', id:''}, {provinceName:' O', id:' O'}, {provinceName:' make', id:' lead'}, {provinceName:' lead', id:' lead'}, {provinceName:' police', id:' police'}, {provinceName:' study, id:' study'},] 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:' O', id:' O, isNumber:false'}], showProvince:false, / / display province showAlb:false, / / display letter keyboard whitchKey:0}}, selectVisible: false,} export let computed = {plateNumber1: {get () {return this.plateNumber | |'}, set (val) {this.$emit ('update:plateNumber') Val)}

Because the exclusive framework is used here, the corresponding lifecycle functions are placed in the location of the normal vue project as needed, and the event is written as a normal function. Methods is the method in the normal methods, and model is the data of the return in the data.

The answer to the question about how to use the vue license plate search component is shared here. I hope the above content can be of some help to everyone. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.