快捷導(dǎo)航

使用Vue實(shí)現(xiàn)簡易的車牌輸入鍵盤

更新時(shí)間：2023年11月28日 11:08:29 作者：大陽光男孩

這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)簡易的車牌輸入鍵盤效果,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以了解下

效果圖如下：

代碼如下：

<template>
  <div>
    <div class="carNoBoxInput">
      <div style="padding: 6px;border: 2px solid #fff;border-radius: 6px;margin: 6px 3px 6px 6px;">
        <input class="inputBox" :value="licensePlateUnit[0]" @click="licensePlateDoor = true"/>
        <input class="inputBox" :value="licensePlateUnit[1]" @click="licensePlateDoor = true"/>
        <span class="dot"></span>
        <input class="inputBox" :value="licensePlateUnit[2]" @click="licensePlateDoor = true"/>
        <input class="inputBox" :value="licensePlateUnit[3]" @click="licensePlateDoor = true"/>
        <input class="inputBox" :value="licensePlateUnit[4]" @click="licensePlateDoor = true"/>
        <input class="inputBox" :value="licensePlateUnit[5]" @click="licensePlateDoor = true"/>
        <input class="inputBox" :value="licensePlateUnit[6]" @click="licensePlateDoor = true"/>
        <input v-if="7 === licensePlateUnit.length - 1" class="inputBox" :class="7 === licensePlateUnit.length - 1 ? 'inputBoxActive' : 'inputBox'" :value="licensePlateUnit[7]"/>
        <img v-if="7 !== licensePlateUnit.length - 1" src="../assets/newEnergy.png" style="height: 36px;width: 36px;"  alt="新能源"/>
      </div>
    </div>
    <div v-if="licensePlateDoor">
      <div v-if="licensePlateUnit.length < 1" class="carNoBox">
        <span class="carNo" v-for="item in columns" :key="item" @click="pickOn(item)">
          {{item}}
        </span>
        <span class="delBt" @click="delCarNo">X</span>
      </div>
      <div v-if="licensePlateUnit.length >= 1" class="carNoBox">
      <span class="carNo" v-for="item in numberColumns" :key="item" @click="pickOn(item)">
        {{item}}
      </span>
        <div style="display: flex;align-items: center">
          <span class="delBt" @click="delCarNo">X</span>
          <span class="delBt" style="margin-left: 6px;width: 42px" @click="confirm">確認(rèn)</span>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
 
 
 
export default {
  data() {
    return {
      licensePlateDoor: false,
      activeIndex: 0,
      licensePlateUnit: [],
      columns: [//省縮寫選擇
        '京', '滬', '鄂', '湘', '川', '渝', '粵', '閩', '晉', '黑',
 
        '津', '浙', '豫', '贛', '貴', '青', '瓊', '寧', '吉', '蒙',
 
        '冀', '蘇', '皖', '桂', '云', '陜', '甘', '藏', '新', '遼',
        '魯'],
      numberColumns: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0','Q', 'W', 'E',
        'R', 'T', 'Y', 'U', 'I', 'O', 'P', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'Z',
        'X', 'C', 'V', 'B', 'N', 'M', '港','澳','學(xué)','領(lǐng)','警'
      ],
    }
  },
  methods: {
    pickOn(value) {
      this.licensePlateDoor = true;
      if (this.licensePlateUnit.length <= 7) {
        this.licensePlateUnit.push(value)
      }
    },
    delCarNo() {
      this.licensePlateUnit.pop();
    },
    confirm() {
      if(this.licensePlateUnit.length >= 7) {
        console.log("車牌是："+this.licensePlateUnit.join(''));
        this.licensePlateDoor = false;
      }
    },
  }
}
</script>
 
 
<style scoped>
  .carNo {
    border-radius: 6px;
    background: #fff;
    font-weight: bold;
    font-size: 20px;
    height: 28px;
    width:28px;
    margin: 6px;
    padding: 12px;
    cursor: pointer;
  }
  .inputBox {
    color: white;
    height: 30px;
    line-height: 30px;
    width: 30px;
    font-size: 28px;
    text-align: center;
    background-color: transparent;
    border: none;
    outline: none;
    caret-color: rgba(0, 0, 0, 0)
  }
  input:focus {
    border-bottom: 3px solid #fff;
    transition: all 0.5s;
  }
  .dot {
    margin-bottom: 6px;
    background-color: #fff;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    display: inline-block
  }
  .delBt {
    background: #ACB3BB;
    border-radius: 6px;
    display: inline-block;
    font-weight: bold;
    font-size: 20px;
    height: 28px;
    width:28px;
    margin: 6px;
    padding: 12px;
    cursor: pointer;
  }
  .carNoBoxInput {
    display: flex;
    width: 310px;
    align-items: center;
    //height: 80px;
    border-radius: 8px;
    margin: 12px 0;
    background: #2D66D8;
  }
  .carNoBox {
    background: #D0D5D9;
    position: relative;
    width: 600px;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    justify-items: center;
    align-items: center
  }
</style>

到此這篇關(guān)于使用Vue實(shí)現(xiàn)簡易的車牌輸入鍵盤的文章就介紹到這了,更多相關(guān)Vue車牌輸入鍵盤內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: