js手写车牌输入键盘

<!-- 车牌键盘组件 -->

<template>

  <div>

    <!-- 车牌号展示 -->

    <div

      :class="[

        carbox.length == 0

          ? 'carbox'

          : carbox.length > 7

          ? 'carboxs'

          : 'carbox1',

      ]"

    >

      <div @click="car0" :class="[carbox.length == 0 ? 'a' : '']">

        {{ carbox[0] }}

      </div>

      <div

        @click="car1"

        :class="[carl == 1 ? 'b' : carbox.length == 1 ? 'a' : '']"

      >

        {{ carbox[1] }}

      </div>

      .

      <div

        @click="car2"

        :class="[carl == 2 ? 'b' : carbox.length == 2 ? 'a' : '']"

      >

        {{ carbox[2] }}

      </div>

      <div

        @click="car3"

        :class="[carl == 3 ? 'b' : carbox.length == 3 ? 'a' : '']"

      >

        {{ carbox[3] }}

      </div>

      <div

        @click="car4"

        :class="[carl == 4 ? 'b' : carbox.length == 4 ? 'a' : '']"

      >

        {{ carbox[4] }}

      </div>

      <div

        @click="car5"

        :class="[carl == 5 ? 'b' : carbox.length == 5 ? 'a' : '']"

      >

        {{ carbox[5] }}

      </div>

      <div

        @click="car6"

        :class="[carl == 6 ? 'b' : carbox.length == 6 ? 'a' : '']"

      >

        {{ carbox[6] }}

      </div>

      <div

        @click="car7"

        :class="[carl == 7 ? 'b' : carbox.length == 7 ? 'a' : '']"

      >

        {{ carbox[7] }}

      </div>

    </div>

    <!-- 车牌键盘区域 -->

    <div class="carpai" v-show="carpshow">

      <div @click="closeKey" class="Keyboard-bg"></div>

      <div class="keyboardValue" v-show="carshow">

        <div

          @click="carjin(p)"

          style="width: 23%"

          v-for="(p, i) in keyboardValues"

          :key="i + p"

        >

          {{ p }}

        </div>

        <div @click="carvalue(p)" v-for="(p, i) in keyboardValue" :key="i">

          {{ p }}

        </div>

      </div>

      <div class="keyboardNumber" v-show="carshows">

        <div

          @click="tapKeyboards(p)"

          :class="[carbox.length > 1 ? 'keyboardNumbers' : 'keyboardNumbersh']"

          v-for="(p, i) in keyboardAlph"

          :key="i"

        >

          {{ p }}

        </div>

        <div

          @click="tapKeyboard(q)"

          v-for="(q, id) in keyboardNumber"

          :key="id + q"

        >

          {{ q }}

        </div>

      </div>

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      keyboardValues: "晋无京沪",

      keyboardValue:

        "粤港澳津冀云辽黑湘皖鲁新苏浙赣鄂桂甘蒙陕豫吉闽贵川青藏琼宁渝",

      keyboardNumber: "QWERTYUIOPASDFGHJKLZXCVBNM巛",

      keyboardAlph: "1234567890",

      carbox: [],

      carshow: true,

      carshows: false,

      carpshow: true,

      carl: 0,

    };

  },

  mounted() {

    console.log(this.car);

  },

  props: ["car"],

  methods: {

    car0() {

      if (this.carbox.length != 0) {

        this.carpshow = true;

        this.carl = 0;

      } else {

        this.carpshow = true;

      }

    },

    car1() {

      if (this.carbox.length != 0) {

        this.carshow = false;

        this.carpshow = true;

        this.carl = 1;

      } else {

        this.carpshow = true;

      }

    },

    car2() {

      if (this.carbox.length != 0) {

        this.carshow = false;

        this.carpshow = true;

        if (this.carbox.length > 2) {

          this.carl = 2;

        }

      } else {

        this.carpshow = true;

      }

    },

    car3() {

      if (this.carbox.length != 0) {

        this.carshow = false;

        this.carpshow = true;

        if (this.carbox.length > 3) {

          this.carl = 3;

        }

      } else {

        this.carpshow = true;

      }

    },

    car4() {

      if (this.carbox.length != 0) {

        this.carshow = false;

        this.carpshow = true;

        if (this.carbox.length > 4) {

          this.carl = 4;

        }

      } else {

        this.carpshow = true;

      }

    },

    car5() {

      if (this.carbox.length != 0) {

        this.carshow = false;

        this.carpshow = true;

        if (this.carbox.length > 5) {

          this.carl = 5;

        }

        console.log(this.carl);

      } else {

        this.carpshow = true;

      }

    },

    car6() {

      if (this.carbox.length != 0) {

        this.carshow = false;

        this.carpshow = true;

        if (this.carbox.length > 6) {

          this.carl = 6;

        }

        console.log(this.carl);

      } else {

        this.carpshow = true;

      }

    },

    car7() {

      if (this.carbox.length != 0) {

        this.carshow = false;

        this.carpshow = true;

        if (this.carbox.length > 7) {

          this.carl = 7;

        }

        console.log(this.carl);

      } else {

        this.carpshow = true;

      }

    },

    carvalue(e) {

      if (this.carl == 0) {

        this.carbox[0] = e;

      } else {

        this.carbox.push(e);

      }

      this.carshow = false;

      this.carshows = true;

      this.$emit("cars", this.carbox);

    },

    carjin(e) {

      this.carshow = false;

      this.carshows = true;

      if (this.carl == 0) {

        this.carbox[0] = e;

      } else {

        this.carbox.push(e);

      }

      this.$emit("cars", this.carbox);

    },

    tapKeyboard(e) {

      if (e == "巛") {

        console.log("删除");

        this.carbox.pop();

        if (this.carbox.length == 0) {

          this.carshow = true;

          this.carshows = false;

        }

      } else if (this.carl == 1) {

        this.$set(this.carbox, 1, e);

        this.carl = 0;

        console.log(this.carbox);

      } else if (this.carl == 2 && this.carbox.length > 2) {

        this.$set(this.carbox, 2, e);

        this.carl = 0;

        console.log(this.carbox);

      } else if (this.carl == 3 && this.carbox.length > 3) {

        this.$set(this.carbox, 3, e);

        this.carl = 0;

        console.log(this.carbox);

      } else if (this.carl == 4 && this.carbox.length > 4) {

        this.carl = 0;

        this.$set(this.carbox, 4, e);

        console.log(this.carbox);

      } else if (this.carl == 5 && this.carbox.length > 5) {

        this.carl = 0;

        this.$set(this.carbox, 5, e);

        console.log(this.carbox);

      } else if (this.carl == 6 && this.carbox.length > 6) {

        this.carl = 0;

        this.$set(this.carbox, 6, e);

        console.log(this.carbox);

      } else if (this.carl == 7 && this.carbox.length > 7) {

        this.carl = 0;

        this.$set(this.carbox, 7, e);

        console.log(this.carbox);

      } else if (this.carbox.length < 8) {

        this.carbox.push(e);

      }

      this.$emit("cars", this.carbox);

    },

    tapKeyboards(e) {

      if (this.carbox.length > 1) {

        if (this.carl == 1) {

          this.carl = 0;

          this.$set(this.carbox, 1, e);

          console.log(this.carbox);

        } else if (this.carl == 2 && this.carbox.length > 2) {

          this.carl = 0;

          this.$set(this.carbox, 2, e);

          console.log(this.carbox);

        } else if (this.carl == 3 && this.carbox.length > 3) {

          this.carl = 0;

          this.$set(this.carbox, 3, e);

          console.log(this.carbox);

        } else if (this.carl == 4 && this.carbox.length > 4) {

          this.carl = 0;

          this.$set(this.carbox, 4, e);

          console.log(this.carbox);

        } else if (this.carl == 5 && this.carbox.length > 5) {

          this.carl = 0;

          this.$set(this.carbox, 5, e);

          console.log(this.carbox);

        } else if (this.carl == 6 && this.carbox.length > 6) {

          this.carl = 0;

          this.$set(this.carbox, 6, e);

          console.log(this.carbox);

        } else if (this.carl == 7 && this.carbox.length > 7) {

          this.carl = 0;

          this.$set(this.carbox, 7, e);

          console.log(this.carbox);

        } else if (this.carbox.length < 8) {

          this.carbox.push(e);

        }

        this.$emit("cars", this.carbox);

      }

    },

    closeKey() {

      this.carpshow = false;

      console.log("我关了");

    },

  },

};

</script>

<style lang="scss" scoped>

.Keyboard-bg {

  position: fixed;

  opacity: 0.2;

  top: 23.2%;

  left: 0;

  z-index: 1;

  width: 100%;

  height: 34vh;

  background-color: #888888;

}

.carbox {

  display: flex;

  justify-content: space-around;

  align-items: center;

  width: 100%;

  height: 60px;

  font-size: 30px;

  margin: 10px auto;

  .b {

    width: 10%;

    height: 60%;

    border: 1px solid yellow;

    display: flex;

    align-items: center;

  }

  .a {

    width: 10%;

    height: 60%;

    border: 1px solid #0ac65d;

    display: flex;

    align-items: center;

    justify-content: center;

  }

  div {

    width: 10%;

    height: 60%;

    border: 1px solid #888888;

    display: flex;

    align-items: center;

    justify-content: center;

  }

}

.carboxs {

  display: flex;

  justify-content: space-around;

  align-items: center;

  width: 100%;

  height: 60px;

  font-size: 30px;

  margin: 10px auto;

  .b {

    width: 10%;

    height: 60%;

    border: 1px solid yellow;

    display: flex;

    align-items: center;

  }

  .a {

    width: 10%;

    height: 60%;

    border: 1px solid #0ac65d;

    display: flex;

    align-items: center;

    justify-content: center;

  }

  div {

    width: 10%;

    height: 60%;

    border: 1px solid #0ac65d;

    display: flex;

    align-items: center;

    justify-content: center;

  }

}

.carbox1 {

  display: flex;

  justify-content: space-around;

  align-items: center;

  width: 100%;

  height: 60px;

  font-size: 30px;

  margin: 10px auto;

  .b {

    width: 10%;

    height: 60%;

    border: 1px solid yellow;

    display: flex;

    align-items: center;

  }

  .a {

    width: 10%;

    height: 60%;

    border: 1px solid #0ac65d;

    display: flex;

    align-items: center;

    justify-content: center;

  }

  div {

    width: 10%;

    height: 60%;

    border: 1px solid #0092db;

    display: flex;

    align-items: center;

    justify-content: center;

  }

}

.carpai {

  width: 100%;

  height: 42vh;

  position: fixed;

  bottom: 0;

  left: 0;

  background: #ffffff;

  box-shadow: 0px 0px 3px 1px #dfe4eb;

  .jw {

    width: 50%;

  }

  .keyboardValue {

    height: 100%;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-around;

    align-content: space-around;

    div {

      width: 15%;

      height: 10%;

      display: flex;

      justify-content: center;

      align-items: center;

      box-shadow: 0px 0px 4px 1px #dfe4eb;

    }

  }

  .keyboardNumber {

    height: 100%;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-around;

    align-content: space-around;

    .keyboardNumbers {

      width: 17%;

      height: 10%;

      display: flex;

      justify-content: center;

      align-items: center;

      box-shadow: 0px 0px 4px 1px #dfe4eb;

    }

    .keyboardNumbersh {

      width: 17%;

      height: 10%;

      display: flex;

      justify-content: center;

      align-items: center;

      box-shadow: 0px 0px 4px 1px #dfe4eb;

      background: #e5e5e5;

      border: 1px solid #cdd0d5;

    }

    div {

      width: 17%;

      height: 10%;

      display: flex;

      justify-content: center;

      align-items: center;

      box-shadow: 0px 0px 4px 1px #dfe4eb;

    }

  }

}

</style>

<!-- 页面调用 -->

import carpai from "@/components/car.vue";

 components: {

    carpai,

  },

  <carpai @cars="cars" :car="'ok'" />

 cars(e) {

      let a = e.join();

      let reg = new RegExp(",", "g");

      let res = a.replace(reg, "");

      console.log(res);

    },