iis服务器助手广告广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue车牌搜索组件使用方法详解
  • 707

0
分享到

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

2024-04-02 19:04:59 707人浏览 安东尼
摘要

一个简单的车牌输入组件（Vue），供大家参考，具体内容如下 代码： vue代码： <template> <div class="pulls">

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

代码：

vue代码：


<template>
    <div class="pulls">
      <!-- 精确车牌搜索 -->
      <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">搜索</button>
          </div>
          <div class="doneRight" v-if="noRightPart!='on'">
            <u-icon name="list-dot"></u-icon>
            筛选
          </div>
        </div>
      </div>

      <!-- 键盘弹框 -->
      <!-- 省简称 -->
      <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">取消</button>
            <!-- <button type="primary" size="small" plain @click="changeKeyBord">切换键盘</button> -->
            <button type="primary" size="small" plain @click="enterWord">确认</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>删</li> -->
            <li class="delete" @click.stop="deleteAlb"><i class="icon">&#xe602;</i>删</li>
          </ul>
        </div>
      </div>
      
      <!-- 数字字母 -->
      <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">取消</button>
            <!-- <button type="primary" size="small" plain @click="changeKeyBord">切换键盘</button> -->
            <button type="primary" size="small" plain @click="enterWord">确认</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>删</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{
        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(){
    //展示键盘
    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 = {}

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: "车牌号码最长不可超过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
  }

}

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的数据

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue车牌搜索组件使用方法详解

本文链接: https://www.lsjlt.com/news/136202.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • vue车牌搜索组件使用方法详解
    一个简单的车牌输入组件（vue），供大家参考，具体内容如下 代码： vue代码： <template> <div class="pulls"> ...
    99+
    2024-04-02
  • vue车牌输入组件使用方法详解
    一个简单的车牌输入组件（vue），供大家参考，具体内容如下 效果图： vue代码： <template> <div class="enTer">...
    99+
    2024-04-02
  • Android SearchView搜索控件使用方法详解
    本文实例为大家分享了Android SearchView搜索控件的具体实现代码，供大家参考，具体内容如下 方法介绍 setQueryHint 设置 Hint 的文字内容 setMax...
    99+
    2024-04-02
  • vue3.0翻牌数字组件使用方法详解
    本文实例为大家分享了vue3.0翻牌数字组件使用的具体代码，供大家参考，具体内容如下 代码 <template>   <div class="number-cou...
    99+
    2024-04-02
  • Vue分页器组件使用方法详解
    本文实例为大家分享了Vue分页器组件的使用，供大家参考，具体内容如下 效果图如下： 鼠标悬浮时切换为箭头： ①创建自定义分页组件Pager.vue：预设主题色为@themeCol...
    99+
    2024-04-02
  • vue验证码组件使用方法详解
    本文实例为大家分享了vue验证码组件使用的具体实现代码，供大家参考，具体内容如下 代码如下： <template> <div class="join...
    99+
    2024-04-02
  • vue滑动解锁组件使用方法详解
    本文实例为大家分享了vue滑动解锁组件的使用，供大家参考，具体内容如下 这是一个pc端的滑动解锁组件 效果图： 话不多说，直接上代码 html部分 <template>...
    99+
    2024-04-02
  • Vue滑块解锁组件使用方法详解
    本文实例为大家分享了Vue滑块解锁组件的使用，供大家参考，具体内容如下 依据 JS拖动滑块验证 开发的 Vue 滑块解锁组件。 <template>   <div ...
    99+
    2024-04-02
  • Vue对话框组件使用方法详解
    本文实例为大家分享了Vue对话框组件的使用，供大家参考，具体内容如下 效果如下图所示：（整体样式模仿ant-design-vue Modal样式，同时阴影覆盖浏览器窗口） ①创建组...
    99+
    2024-04-02
  • Vue自嵌套树组件使用方法详解
    本文实例为大家分享了Vue自嵌套树组件的使用方法，供大家参考，具体内容如下 效果图 注意事项 组件自嵌套，定义名称时就定义为组件名 单选和多选用户时...
    99+
    2024-04-02
  • vue加载天气组件使用方法详解
    本文实例为大家分享了vue加载天气组件的使用方法，供大家参考，具体内容如下 首先我们进入中国天气网生成一段代码 根据需要设置天气样式 复制并修改生成的这段代码到vue中 将scr...
    99+
    2024-04-02
  • Vue跑马灯marquee组件使用方法详解
    本文实例为大家分享了Vue跑马灯marquee组件的具体代码，供大家参考，具体内容如下 一、实现效果 二、实现过程 前言：最开始用间隔器方案制作了一个跑马灯，但是放在移动端中会出现...
    99+
    2024-04-02
  • Vue加载中动画组件使用方法详解
    本文实例为大家分享了Vue加载中动画组件的使用，供大家参考，具体内容如下 （模仿ant-design加载中样式）效果图如下： ①创建Loading.vue组件： <templ...
    99+
    2024-04-02
  • vue中keepAlive组件的作用和使用方法详解
    前言 在面试的时候，很多面试官再问vue的时候可能就会提一嘴，你知道keep-alive有什么作用吗？ keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动...
    99+
    2024-04-02
  • Vue子组件调用父组件方法案例详解
    一、直接在子组件中通过this.$parent.event来调用父组件的方法 <!-- 父组件 --> <template> <div> ...
    99+
    2024-04-02
  • uniapp添加车牌组件的实现与使用
    目录1.先看效果2.插件实现3.插件使用总结1.先看效果 2.插件实现 <!-- * @Author: dfh * @Date: 2022-04-20 09:43:44 ...
    99+
    2024-04-02
  • vue之ele多级联组件的使用方法详解
    本文实例为大家分享了vue之ele多级联组件的使用具体代码，供大家参考，具体内容如下 多级联组件的使用 html <el-cascader         ref="casc...
    99+
    2024-04-02
  • vue-seamless-scroll无缝滚动组件使用方法详解
    本文实例为大家分享了vue无缝滚动组件vue-seamless-scroll的具体实现代码，供大家参考，具体内容如下 下载 cnpm i -S vue-seamless-scrol...
    99+
    2024-04-02
  • aspjpeg组件使用方法284455详解
    1、什么是AspJpeg？ AspJpeg是一款功能强大的基于Microsoft IIS环境的图片处理组件，网络上对其进行详细和深入介绍的中文文章并不多，即使有一般也只是牵涉到图片缩...
    99+
    2023-05-20
    aspjpeg组件使用方法
  • aspjpeg组件使用方法284435详解
    1、什么是AspJpeg？ AspJpeg是一款功能强大的基于Microsoft IIS环境的图片处理组件，网络上对其进行详细和深入介绍的中文文章并不多，即使有一般也只是牵涉到图片缩...
    99+
    2023-05-20
    aspjpeg组件使用方法
软考高级职称资格查询
iis服务器助手广告
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作