Detailed explanation of how to use the Vue license plate search component

Detailed explanation of how to use the Vue license plate search component

A simple license plate input component (vue) for your reference, the specific content is as follows

Code:

vue code:

<template>
    <div class="pulls">
      <!-- Accurate license plate search-->
      <div class="enterPlate">
        <div class="enterBox" :style="{width:noRightPart==='on'?'100%':''}">
          <div :class="['prov',EnterPlateNumber.input.whitchKey===0?'isEntering':'']" @click.stop="enterProv">{{EnterPlateNumber.input.firstWord}}</div>
          <div :class="['alb',EnterPlateNumber.input.whitchKey===1?'isEntering':'']" @click.stop="enterAlbn">{{EnterPlateNumber.input.secondWord}}</div>
          <div :class="['plate',EnterPlateNumber.input.whitchKey===2?'isEntering':'']" :style="{width:noRightPart==='on'?'350rpx':''}" @click.stop="enterLastn">{{EnterPlateNumber.input.lastWords}}</div>
        </div>
        <div class="doneBox">
          <div class="doneLeft">
            <button type="primary" size="small" @click="toSearch">Search</button>
          </div>
          <div class="doneRight" v-if="noRightPart!='on'">
            <u-icon name="list-dot"></u-icon>
            Filter
        </div>
      </div>

      <!-- Keyboard pop-up box-->
      <!-- Provincial abbreviation-->
      <div class="MASK" v-if="EnterPlateNumber.input.showProvince===true" :style="{width:noNeedMask==='y'?0:'',height:noNeedMask==='y'?0:'',marginTop:maskTop?maskTop/75+'rem':0+'rem'}">
        <div class="province" >
          <div class="btns">
            <button type="primary" size="small" plain @click="hiddenKeybord">Cancel</button>
            <!-- <button type="primary" size="small" plain @click="changeKeyBord">Switch keyboard</button> -->
            <button type="primary" size="small" plain @click="enterWord">Confirm</button>
          </div>
          <ul class="keyboard province" id="province">
            <li v-for="(item,index) in EnterPlateNumber.input.provinceList" :key="index" @click.stop="enterPro(item)">{{item.provinceName}}</li>
            <!-- <li class="delete" @click.stop="deletePro"><i class="icon">&#xe602;</i>Delete</li> -->
            <li class="delete" @click.stop="deleteAlb"><i class="icon">&#xe602;</i>Delete</li>
          </ul>
        </div>
      </div>
      
      <!-- Numbers and letters-->
      <div class="MASK" v-if="EnterPlateNumber.input.showAlb===true" :style="{width:noNeedMask==='y'?0:'',height:noNeedMask==='y'?0:'',marginTop:maskTop?maskTop/75+'rem':0+'rem'}">
        <div class="province provinces" >
          <div class="btns">
            <button type="primary" size="small" plain @click="hiddenKeybord">Cancel</button>
            <!-- <button type="primary" size="small" plain @click="changeKeyBord">Switch keyboard</button> -->
            <button type="primary" size="small" plain @click="enterWord">Confirm</button>
          </div>
          <ul class="keyboard number" id="number" >
            <li :class="['num',EnterPlateNumber.input.whitchKey===1?'disabled':'']" v-if="item.isNumber===true" v-for="(item) in EnterPlateNumber.input.plateAlbList" :key="item.AlbName" @click.stop="enterAlb(item)">{{item.AlbName}}</li>
            <li v-if="item.isNumber===false" v-for="(item) in EnterPlateNumber.input.plateAlbList" :key="item.AlbName" @click.stop="enterAlb(item)">{{item.AlbName}}</li>
            <li class="delete deletes" @click.stop="deleteAlb"><i class="icon">&#xe602;</i>Delete</li>
          </ul>
        </div>
      </div>
    </div>
</template>
<style scoped lang="scss">
  .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.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);
      }
    }
</style>

event:

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(){
    //Show the 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 on the province input box enterProv(){
    this.methods('enterProv',true)
  },
  //Click on the province async enterPro(item){
    let isOk = await this.methods('enterPro',item)
    if(isOk){
      this.methods('enterAlbn',true)
    }
  },
  //Delete province deletePro(){
    this.methods('deletePro')
  },

  //Click on the letter input box enterAlbn(){
    this.methods('enterAlbn',true)
  },
  //Click on the number async enterAlb(item){
    let isOk = await this.methods('enterAlb',item)
    if(isOk===2){
      this.methods('setKey',2)
    }
  },
  //Deletion of numeric keyboard 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 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:

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: "The license plate number cannot exceed 8 digits",
        })
        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:'京',id:'京'},
        {provinceName:'Jin',id:'Jin'},
        {provinceName:'冀',id:'冀'},
        {provinceName:'晋',id:'晋'},
        {provinceName:'蒙',id:'蒙'},
        {provinceName:'Liao',id:'Liao'},
        {provinceName:'吉',id:'吉'},
        {provinceName:'黑',id:'黑'},
        {provinceName:'沪',id:'沪'},
        {provinceName:'苏',id:'苏'},
        {provinceName:'浙',id:'浙'},
        {provinceName:'皖',id:'皖'},
        {provinceName:'闽',id:'闽'},
        {provinceName:'赣',id:'赣'},
        {provinceName:'Lu',id:'Lu'},
        {provinceName:'豫',id:'豫'},
        {provinceName:'鄂',id:'鄂'},
        {provinceName:'湘',id:'湘'},
        {provinceName:'粤',id:'粤'},
        {provinceName:'Gui',id:'Gui'},
        {provinceName:'琼',id:'琼'},
        {provinceName:'渝',id:'渝'},
        {provinceName:'川',id:'川'},
        {provinceName:'贵',id:'贵'},
        {provinceName:'云',id:'云'},
        {provinceName:'藏',id:'藏'},
        {provinceName:'陕',id:'陕'},
        {provinceName:'Gan',id:'Gan'},
        {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, //Show the province showAlb:false, //Show the letter keyboard whitchKey:0
    }
  },
  selectVisible: false,
}
export let computed = {
  plateNumber1 : {
    get () {
      return this.plateNumber||''
    },
    set (val) {
      this.$emit('update:plateNumber', val)
    }
  }
}

Because a unique framework is used here, the corresponding life cycle functions are placed in the normal Vue project position as needed, and the event is written as a normal function. The methods are the methods in the normal methods of i, and the model is the data returned in the data.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Detailed explanation of how to use the Vue license plate input component
  • Use Vue3+Vant component to implement App search history function (sample code)
  • Vue elementui implements the example code of the search bar public component encapsulation
  • Detailed explanation of the encapsulation and application of Vue2.x general condition search components
  • Vue component practice searchable drop-down box function
  • Implementation code of Vue drop-down menu component (including search)
  • Vue.js project el-input component listens to the enter key to implement the search function example
  • Implementing a custom component for searchable drop-down box based on Vue
  • Vue component implements searchable drop-down box extension
  • Detailed explanation of the use of Vue2.0 multi-condition search component

<<:  How to change password and set password complexity policy in Ubuntu

>>:  Let's talk about the characteristics and isolation levels of MySQL transactions

Recommend

A detailed introduction to the Linux directory structure

When you first start learning Linux, you first ne...

arcgis.js controls the display range of the map body to automatically bounce back when it exceeds the area (implementation ideas)

Table of contents background Effect Ideas backgro...

A detailed summary of HTML tag nesting rules suitable for beginners

I have been relearning HTML recently, which can be...

Vue implements the drag and drop sorting function of the page div box

vue implements the drag and drop sorting function...

How does MySQL implement ACID transactions?

Preface Recently, during an interview, I was aske...

JS+Canvas draws a lucky draw wheel

This article shares the specific code of JS+Canva...

There are text and pictures in the a tag. How to hide the text and only show the picture?

Often you will encounter a style of <a> tag...

Explanation of the usage scenarios of sql and various nosql databases

SQL is the main trunk. Why do I understand it thi...

Solution to 404 error when downloading apk file from IIS server

Recently, when using IIS as a server, the apk fil...

Detailed installation instructions for the cloud server pagoda panel

Table of contents 0x01. Install the Pagoda Panel ...

MySQL database optimization: detailed explanation of table and database sharding operations

This article uses examples to illustrate the tabl...

Mysql splits string into array through stored procedure

To split a string into an array, you need to use ...

How to redirect PC address to mobile address in Vue

Requirements: The PC side and the mobile side are...

Implementation steps of Mysql merge results and horizontal splicing fields

Preface Recently, I was working on a report funct...

Solution to forgetting MySQL root password in MACOS

MySQL is a relational database management system ...