<!-- 車牌鍵盤組件 -->

<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>

? ? <!-- 車牌鍵盤區(qū)域 -->

? ? <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);

? ? },

總結

以上是生活随笔為你收集整理的js手写车牌输入键盘的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。