欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue車牌輸入組件使用方法詳解

 更新時(shí)間:2021年06月29日 09:55:02   作者:contour  
這篇文章主要為大家詳細(xì)介紹了vue車牌輸入組件的實(shí)現(xiàn)方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

一個(gè)簡(jiǎn)單的車牌輸入組件(vue),供大家參考,具體內(nèi)容如下

效果圖:

vue代碼:

<template>
    <div class="enTer">
      <div class="plateInput" id="plateInput">
        <div class="item" :class="{active: plateInput.input.type === 'p1'}" @click.stop="clickInput('p1')"><span id="p1">{{plateInput.input.value.p1}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p2'}" @click.stop="clickInput('p2')"><span id="p2">{{plateInput.input.value.p2}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p3'}" @click.stop="clickInput('p3')"><span id="p3">{{plateInput.input.value.p3}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p4'}" @click.stop="clickInput('p4')"><span id="p4">{{plateInput.input.value.p4}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p5'}" @click.stop="clickInput('p5')"><span id="p5">{{plateInput.input.value.p5}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p6'}" @click.stop="clickInput('p6')"><span id="p6">{{plateInput.input.value.p6}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p7'}" @click.stop="clickInput('p7')"><span id="p7">{{plateInput.input.value.p7}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p8',new: !plateInput.input.value.p8}" @click.stop="clickInput('p8')"><span id="p8">{{plateInput.input.value.p8}}</span></div>
      </div>
      <div class="bords" v-if="plateInput.input.dialogVisible">
        <div class="bor">
          <div class="btns">
            <button type="primary" size="small" plain @click="hiddenKeybord">取消</button>
            <button type="primary" size="small" plain @click="enterWord">確認(rèn)</button>
          </div>
          <ul class="keyboard province" id="province" v-if="plateInput.input.dialogVisible && plateInput.input.type === 'p1'">
            <li v-for="i in Keyboard.province" @click.stop="clickKeyboard(i)">{{i}}</li>
            <li class="delete" @click.stop="clickDelete"><i class="icon">&#xe602;</i>刪</li>
          </ul>
          <ul class="keyboard province" id="number" v-if="plateInput.input.dialogVisible && plateInput.input.type !== 'p1'">
            <li v-for="i in Keyboard.number" :class="{num: plateInput.input.type === 'p2' && parseInt(i) >= 0 && parseInt(i) <= 9}" @click.stop="clickKeyboard(i)">{{i}}</li>
            <li class="delete deletes" @click.stop="clickDelete"><i class="icon">&#xe602;</i>刪</li>
          </ul>
        </div>
      </div>
    </div>
</template>
<style scoped lang="scss">
  .enTer{
    .plateInput{
      padding:0 20rpx;
      display: flex;
      justify-content: space-around;
      .item{
        width: 60rpx;
        height: 75rpx;
        border:1rpx solid #FF5100;
        border-radius: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
      }
      .active{
        border-color: #3399ff;
      }
    }
    .bords{
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 999;
      .bor{
        position: relative;
        .btns{
          width: 100%;
          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;
          }
        }
      }
      // 鍵盤
      .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;
      }
      .num{
        color: rgba(0,0,0,0.15);
      }
      .province{
        position: relative;
      }
      .provinces{
        position: relative;
      }
      .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 + 90rpx);
      }
      .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 = {
  clickInput (type) {
    this.methods('clickInput',type)
  },
  clickKeyboard (val) {
    if (this.plateInput.input.type === 'p2' && parseInt(val) >= 0 && parseInt(val) <= 9) return
    this.methods('clickKeyboard', val)
    this.methods('setPlateNumber')
    this.methods('setDirectIssuedPlateNumber')
  },
  //刪除車牌
  clickDelete () {
    this.methods('clickDelete')
    this.methods('setPlateNumber')
    this.methods('setDirectIssuedPlateNumber')
  },
  hiddenKeybord(){
    this.methods('hiddenKeybord')
  },
  enterWord(){
    this.methods('enterWord')
  }
}
export let watch = {}

methods方法:

export default class {
  clickInput(type){
    this.plateInput.input.type = type
    this.plateInput.input.dialogVisible = true
  }
  hiddenKeybord(){
    this.plateInput.input.dialogVisible = false
  }
  enterWord(){
    this.plateInput.input.dialogVisible = false
  }
  clickKeyboard (val) {
    this.plateInput.input.value[this.plateInput.input.type] = val
    let type = this.plateInput.input.type.split('p')[1]
    if (type !== '8') {
      this.plateInput.input.type = 'p' + (parseInt(type) + 1)
    }
  }
  clickDelete () {
    this.plateInput.input.value[this.plateInput.input.type] = undefined
    let nu = this.plateInput.input.type.split('p')[1]-1
    if(nu>=0){
      this.plateInput.input.value['p'+nu] = undefined
    }
    let type = this.plateInput.input.type.split('p')[1]
    if (type !== '1') {
      this.plateInput.input.type = 'p' + (parseInt(type) - 1)
    }
  }
  setPlateNumber () {
    if (this.plateInput.input.plateNumber) {
      this.plateNumber1 = this.plateInput.input.plateNumber
    }else{
      this.plateNumber1 = undefined
    }
  }
  setDirectIssuedPlateNumber () {
    if (this.plateInput.input.plateNumber) {
      this.plateNumber1 = this.plateInput.input.plateNumber
    }else{
      this.plateNumber1 = undefined
    }
  }

}

model數(shù)據(jù):

export let props = ['name','plateNumber','noRightPart']
export let model = {
  currentPlate:undefined,
  plateInput:{
    input:{
      value:{
        p1:'桂',
        p2:'B',
        p3:2,
        p4:2,
        p5:2,
        p6:2,
        p7:2,
        p8:0
      },
      type:'p1',
      dialogVisible:false
    }
  },
  Keyboard: {
    province: ['京', '津', '冀', '晉', '蒙', '遼', '吉', '黑', '滬', '蘇', '浙', '皖', '閩', '贛', '魯', '豫', '鄂', '湘', '粵', '桂', '瓊', '渝', '川', '貴', '云', '藏', '陜', '甘', '青','寧','新','臺(tái)','港','澳','使','領(lǐng)','警','學(xué)'],
    number: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C','D', 'E', 'F', 'G','H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '學(xué)', '港', '澳']
  },
}
export let computed = {
  plateNumber1 : {
    get () {
      return this.plateNumber||''
    },
    set (val) {
      this.$emit('update:plateNumber', val)
    }
  }
}

因?yàn)檫@里用了獨(dú)家的框架,所以根據(jù)需要把相應(yīng)的生命周期函數(shù)放到正常的vue項(xiàng)目的位置,把event就寫成正常的函數(shù),methods就是i正常的methods里面的方法,model就是data里return的數(shù)據(jù)。

關(guān)于vue.js組件的教程,請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

更多vue學(xué)習(xí)教程請(qǐng)閱讀專題《vue實(shí)戰(zhàn)教程》

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue 富文本編輯器tinymce的安裝配置使用教程

    Vue 富文本編輯器tinymce的安裝配置使用教程

    TinyMCE是一個(gè)輕量級(jí)的基于瀏覽器的所見即所得編輯器,由JavaScript寫成,TinyMCE是一個(gè)根據(jù)LGPL license發(fā)布的自由軟件,你可以把它用于商業(yè)應(yīng)用,這篇文章主要介紹了Vue 富文本編輯器tinymce的安裝教程,需要的朋友可以參考下
    2023-09-09
  • Vue Echarts實(shí)現(xiàn)圖表輪播圖以及圖表組件封裝和節(jié)流函數(shù)優(yōu)化講解

    Vue Echarts實(shí)現(xiàn)圖表輪播圖以及圖表組件封裝和節(jié)流函數(shù)優(yōu)化講解

    這篇文章主要介紹了在Vue中優(yōu)雅的使用Echarts實(shí)現(xiàn)圖表輪播圖、Echarts圖表組件封裝、節(jié)流函數(shù)優(yōu)化圖表性能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
    2023-01-01
  • 解決vue報(bào)錯(cuò):Do?not?mutate?vuex?store?state?outside?mutation?handlers問(wèn)題

    解決vue報(bào)錯(cuò):Do?not?mutate?vuex?store?state?outside?mutati

    這篇文章主要介紹了解決vue報(bào)錯(cuò):Do?not?mutate?vuex?store?state?outside?mutation?handlers問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-05-05
  • vue實(shí)現(xiàn)電子時(shí)鐘效果

    vue實(shí)現(xiàn)電子時(shí)鐘效果

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)電子時(shí)鐘效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • 前端vue3?setup使用教程

    前端vue3?setup使用教程

    這篇文章主要為大家介紹了前端vue3架構(gòu)setup使用教程,詳細(xì)介紹?setup?的用法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-02-02
  • Vue利用自定義指令實(shí)現(xiàn)按鈕權(quán)限控制

    Vue利用自定義指令實(shí)現(xiàn)按鈕權(quán)限控制

    這篇文章主要為大家詳細(xì)介紹了Vue如何利用自定義指令實(shí)現(xiàn)按鈕權(quán)限控制效果,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,需要的可以參考下
    2023-05-05
  • vue實(shí)現(xiàn)三級(jí)導(dǎo)航展示和隱藏

    vue實(shí)現(xiàn)三級(jí)導(dǎo)航展示和隱藏

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)三級(jí)導(dǎo)航展示和隱藏,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • vue3使用iframe嵌入ureport2設(shè)計(jì)器,解決預(yù)覽時(shí)NullPointerException異常問(wèn)題

    vue3使用iframe嵌入ureport2設(shè)計(jì)器,解決預(yù)覽時(shí)NullPointerException異常問(wèn)題

    這篇文章主要介紹了vue3使用iframe嵌入ureport2設(shè)計(jì)器,解決預(yù)覽時(shí)NullPointerException異常問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue-treeselect(適配Vue3.2)及Element-plus的TreeSelect組件使用

    vue-treeselect(適配Vue3.2)及Element-plus的TreeSelect組件使用

    這篇文章主要介紹了vue-treeselect(適配Vue3.2)及Element-plus的TreeSelect組件使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-05-05
  • Element的Pagination分頁(yè)sync問(wèn)題小結(jié)

    Element的Pagination分頁(yè)sync問(wèn)題小結(jié)

    本文主要介紹了Element的Pagination分頁(yè)sync問(wèn)題小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-07-07

最新評(píng)論