vue自定義鍵盤實現(xiàn)車牌號的示例代碼
更新時間：2023年07月24日 14:23:52 作者：周亞鑫
本文主要介紹了vue自定義鍵盤實現(xiàn)車牌號的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
本文主要介紹了vue寫車牌號自定義鍵盤，分享給大家，具體如下：
<template>
<div>
<div class="content-wrapper">
<div class="content-top-wrapper">
<van-radio-group v-model="radioCarType">
<van-radio name="1">
藍(lán)牌
<img
slot="icon"
slot-scope="props"
:src="props.checked ? radioImg[1] : radioImg[0]"
/>
</van-radio>
<van-radio name="2">
綠牌
<img
slot="icon"
slot-scope="props"
:src="props.checked ? radioImg[1] : radioImg[0]"
/>
</van-radio>
<van-radio name="3">
黃牌
<img
slot="icon"
slot-scope="props"
:src="props.checked ? radioImg[1] : radioImg[0]"
/>
</van-radio>
</van-radio-group>
</div>
<div class="content-middle-wrapper">
<div class="content-car-number">
<div class="content-section">
<div class="content-section-flex flex-card">
<div class="content-section-flex flex-card-border">
<button
id="font"
class="flex-btn"
@click="btnClickYue"
v-bind:class="{ isClick: isYue }"
>
{{ areaName }}
</button>
<span class="blank-border blank-border-first"></span>
<button
id="letter"
class="flex-btn"
@click="btnClickA"
v-bind:class="{ isClick: isA }"
>
{{ areaLetter }}
</button>
<div class="flex-mid"><span></span></div>
<div class="flex-btns">
<button
id="numOne"
@click="btnClickNum('one')"
v-bind:class="{ isNumClick: isNumOne }"
>
{{ numOne }}
</button>
<span class="blank-border"></span>
<button
id="numTwo"
@click="btnClickNum('two')"
v-bind:class="{ isNumClick: isNumTwo }"
>
{{ numTwo }}
</button>
<span class="blank-border"></span>
<button
id="numThree"
@click="btnClickNum('three')"
v-bind:class="{ isNumClick: isNumThree }"
>
{{ numThree }}
</button>
<span class="blank-border"></span>
<button
id="numFour"
@click="btnClickNum('four')"
v-bind:class="{ isNumClick: isNumFour }"
>
{{ numFour }}
</button>
<span class="blank-border"></span>
<button
id="numFive"
@click="btnClickNum('five')"
v-bind:class="{ isNumClick: isNumFive }"
>
{{ numFive }}
</button>
<span class="blank-border" v-if="radioCarType == '2'"></span>
<button
v-if="radioCarType == '2'"
id="numSix"
@click="btnClickNum('six')"
v-bind:class="{ isNumClick: isNumSix }"
>
{{ numSix }}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="band-btn" :disabled="!checked" @click="bindCar">
立即綁定
</button>
<div class="shadow" v-if="keyboardShow" @click="completeClick"></div>
<div
class="keyboard"
v-if="keyboardShow"
:class="{ animationDown: isDown, animationUp: isUp }"
>
<button class="btn-complete" @click="completeClick">
<span>完成</span>
</button>
<div v-if="keyboard == 'txt'">
<div class="keyboard-row" v-for="(item, rows) in carTxt" :key="rows">
<button
class="keyboard-row-item"
v-for="(i, index) in item.name"
:key="index"
@click="btnWordClick(rows, index, i)"
>
{{ i }}
</button>
</div>
<div class="keyboard-row">
<button
class="keyboard-row-item bottom"
@click="btnBottomClick('新')"
>
新
</button>
<button
class="keyboard-row-item bottom"
@click="btnBottomClick('使')"
>
使
</button>
<button v-for="j in noneBottomtxt" :key="j" class="none-botton">
{{ j }}
</button>
<div class="keyboard-row-item clear" @click="clearClick">
<img src="./images/icon_input_delete.png" alt="刪除" />
</div>
</div>
</div>
<div v-if="keyboard == 'num'">
<div class="keyboard-row" v-for="(item, rows) in carNum" :key="rows">
<button
:disabled="
!isSelectl ? isDisable && i < 10 : isDisable && rows != 0
"
class="keyboard-row-item"
v-for="(i, index) in item.name"
:key="index"
@click="btnWordClick(rows, index, i)"
>
{{ i }}
</button>
</div>
<div class="keyboard-row">
<button
:disabled="isSelectl"
v-for="(item, index) in carNumBottom"
:key="index"
class="keyboard-row-item bottom"
@click="btnBottomNumClick(item)"
>
{{ item }}
</button>
<button v-for="j in noneBottom" :key="j" class="none-botton">
{{ j }}
</button>
<div class="keyboard-row-item clear" @click="clearClick">
<img src="./images/icon_input_delete.png" alt="刪除" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
num: "",
radioCarType: "1", // 單選
radioImg: [
require("./images/radio0.png"),
require("./images/radio1.png"),
require("./images/checked1.png"),
require("./images/checked0.png"),
], //單選圖標(biāo)
checked: true, //協(xié)議復(fù)選框
isAble: false, //發(fā)送控制,
province: "浙", //省份簡稱
plateNumber: "", //默認(rèn)顯示E
checkbox: false,
isDown: false,
isUp: false,
selected: null,
isSelectx: false,
isSelectl: false,
key: "1",
areaName: "",
areaLetter: "",
numOne: "",
numTwo: "",
numThree: "",
numFour: "",
numFive: "",
numSix: "",
isYue: false,
keyboardShow: false,
keyboard: false,
isA: false,
isNumOne: false,
isNumTwo: false,
isNumThree: false,
isNumFour: false,
isNumFive: false,
isNumSix: false,
isDisable: false,
carTxt: [
{
name: ["粵", "京", "冀", "滬", "津", "晉", "蒙", "遼", "吉", "黑"],
},
{
name: ["蘇", "浙", "皖", "閩", "贛", "魯", "豫", "鄂", "湘", "桂"],
},
{
name: ["瓊", "渝", "川", "貴", "云", "藏", "陜", "甘", "青", "寧"],
},
],
carNumBottom: ["W", "X", "Y", "Z"],
noneBottom: ["", "", "", ""],
noneBottomtxt: ["", "", "", "", "", ""],
carNum: [
{
name: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
},
{
name: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K"],
},
{
name: ["L", "M", "N", "P", "Q", "R", "S", "T", "U", "V"],
},
],
};
},
beforeCreate() {
document
.querySelector("body")
.setAttribute("style", "background: #f5f5f5 !important");
},
destroyed() {
document.querySelector("body").setAttribute("style", "background: #fff");
},
mounted() {
this.isYue = true;
this.isA = false;
this.isUp = true;
this.isNumOne = false;
this.isNumTwo = false;
this.isNumThree = false;
this.isNumFour = false;
this.isNumFive = false;
this.isNumSix = false;
this.keyboardShow = true;
this.keyboard = "txt";
this.key = 1;
},
watch: {
radioCarType(news) {
if (news) {
this.isYue = false;
this.keyboardShow = false;
this.keyboard = false;
this.key = "1";
this.areaName = "";
this.areaLetter = "";
this.numOne = "";
this.numTwo = "";
this.numThree = "";
this.numFour = "";
this.numFive = "";
this.numSix = "";
this.isNumOne = false;
this.isNumTwo = false;
this.isNumThree = false;
this.isNumFour = false;
this.isNumFive = false;
this.isNumSix = false;
}
},
},
methods: {
// 車牌號第一位輸入框選擇
btnClickYue() {
this.isYue = true;
this.isA = false;
this.isUp = true;
this.isNumOne = false;
this.isNumTwo = false;
this.isNumThree = false;
this.isNumFour = false;
this.isNumFive = false;
this.isNumSix = false;
this.keyboardShow = true;
this.keyboard = "txt";
this.key = 1;
},
// 鍵盤選擇顯示
btnWordClick(rows, index, i) {
this.selected = i;
if (this.key === 1) {
this.areaName = i;
this.isSelectl = false;
document.getElementById("letter").click();
} else if (this.key === 2) {
this.areaLetter = i;
document.getElementById("numOne").click();
} else if (this.key === 3) {
this.numOne = i;
document.getElementById("numTwo").click();
} else if (this.key === 4) {
this.numTwo = i;
document.getElementById("numThree").click();
} else if (this.key === 5) {
this.numThree = i;
document.getElementById("numFour").click();
} else if (this.key === 6) {
this.numFour = i;
document.getElementById("numFive").click();
} else if (this.key === 7) {
this.numFive = i;
if (this.radioCarType == "2") {
document.getElementById("numSix").click();
}
} else if (this.key === 8) {
this.numSix = i;
}
if ((this.key === 7 || this.key === 8) && this.radioCarType != "2") {
this.carNumBottom = ["W", "X", "Y", "Z", "港", "澳", "學(xué)", "警", "領(lǐng)"];
this.noneBottom = [];
} else if (
this.key === 3 ||
this.key === 4 ||
this.key === 5 ||
this.key === 6
) {
this.carNumBottom = ["W", "X", "Y", "Z"];
this.noneBottom = ["", "", "", ""];
} else if (this.radioCarType == "2" && this.key === 2) {
this.carNumBottom = ["W", "X", "Y", "Z"];
this.noneBottom = ["", "", "", ""];
}
},
// 車牌第一位選擇‘臨','新‘后的鍵盤顯示
btnBottomClick(val) {
this.areaName = val;
this.isSelectx = true;
this.isSelectl = false;
document.getElementById("letter").click();
},
// 鍵盤最后一行字母點擊事件
btnBottomNumClick(i) {
this.selected = i;
if (this.key === 2) {
this.areaLetter = i;
document.getElementById("numOne").click();
} else if (this.key === 3) {
this.numOne = i;
document.getElementById("numTwo").click();
} else if (this.key === 4) {
this.numTwo = i;
document.getElementById("numThree").click();
} else if (this.key === 5) {
this.numThree = i;
document.getElementById("numFour").click();
} else if (this.key === 6) {
this.numFour = i;
document.getElementById("numFive").click();
} else if (this.key === 7) {
this.numFive = i;
if (this.radioCarType == "2") {
document.getElementById("numSix").click();
}
} else if (this.key === 8) {
this.numSix = i;
}
},
// 車牌號第二位輸入框選擇
btnClickA() {
this.isDisable = true;
this.isA = true;
this.isYue = false;
this.isUp = true;
this.isNumOne = false;
this.isNumTwo = false;
this.isNumThree = false;
this.isNumFour = false;
this.isNumFive = false;
this.isNumSix = false;
this.keyboardShow = true;
this.keyboard = "num";
this.key = 2;
},
// 車牌號后五位或六位輸入框選擇
btnClickNum(name) {
if (this.isSelectl) {
this.isDisable = true;
} else {
this.isDisable = false;
}
this.keyboard = "num";
this.keyboardShow = true;
this.isYue = false;
this.isA = false;
this.isNumOne = false;
this.isNumTwo = false;
this.isNumThree = false;
this.isNumFour = false;
this.isNumFive = false;
this.isNumSix = false;
this.isUp = true;
if (name === "one") {
this.isNumOne = true;
this.key = 3;
} else if (name === "two") {
this.isNumTwo = true;
this.key = 4;
} else if (name === "three") {
this.isNumThree = true;
this.key = 5;
} else if (name === "four") {
this.isNumFour = true;
this.key = 6;
} else if (name === "five") {
this.isNumFive = true;
this.key = 7;
} else if (name === "six") {
this.isNumSix = true;
this.key = 8;
}
if ((name === "five" || name === "six") && this.radioCarType != "2") {
this.carNumBottom = ["W", "X", "Y", "Z", "港", "澳", "學(xué)", "警", "領(lǐng)"];
this.noneBottom = [];
} else {
this.carNumBottom = ["W", "X", "Y", "Z"];
this.noneBottom = ["", "", "", ""];
}
},
// 鍵盤點擊‘完成'
completeClick() {
this.isYue = false;
this.isA = false;
this.isNumOne = false;
this.isNumTwo = false;
this.isNumThree = false;
this.isNumFour = false;
this.isNumFive = false;
this.isNumSix = false;
this.isUp = false;
this.isDown = true;
this.keyboardShow = false;
},
// 鍵盤點擊‘刪除圖標(biāo)'
clearClick() {
if (this.key === 1) {
this.areaName = "";
} else if (this.key === 2) {
document.getElementById("font").click();
this.areaLetter = "";
} else if (this.key === 3) {
document.getElementById("letter").click();
this.numOne = "";
} else if (this.key === 4) {
document.getElementById("numOne").click();
this.numTwo = "";
} else if (this.key === 5) {
document.getElementById("numTwo").click();
this.numThree = "";
} else if (this.key === 6) {
document.getElementById("numThree").click();
this.numFour = "";
} else if (this.key === 7) {
document.getElementById("numFour").click();
this.numFive = "";
} else if (this.key === 8) {
document.getElementById("numFive").click();
this.numSix = "";
}
},
// 綁定車牌
bindCar() {
if (this.radioCarType != "2") {
if (
this.areaName === "" ||
this.areaLetter === "" ||
this.numOne === "" ||
this.numTwo === "" ||
this.numThree === "" ||
this.numFour === "" ||
this.numFive === ""
) {
this.$toast("請輸入完整車牌");
return false;
}
this.num =
this.areaName +
this.areaLetter +
this.numOne +
this.numTwo +
this.numThree +
this.numFour +
this.numFive;
} else {
if (
this.areaName === "" ||
this.areaLetter === "" ||
this.numOne === "" ||
this.numTwo === "" ||
this.numThree === "" ||
this.numFour === "" ||
this.numFive === "" ||
this.numSix === ""
) {
this.$toast("請輸入完整車牌");
return false;
}
this.num =
this.areaName +
this.areaLetter +
this.numOne +
this.numTwo +
this.numThree +
this.numFour +
this.numFive +
this.numSix;
}
},
},
};
</script>
<style lang="scss" scoped>
.content-wrapper {
width: 100%;
height: auto;
background-color: #fff;
margin-top: 0.2rem;
}
.content-top-wrapper {
height: 0.96rem;
padding: 0 0.3rem;
font-size: 0.32rem;
color: #212121;
border-bottom: 1px solid #f5f5f5;
}
.content-top-wrapper img {
width: 0.34rem;
height: 0.34rem;
vertical-align: initial;
}
.van-radio-group {
width: 80%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.shadow {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 9;
background: rgba(000,000,000,0);
}
.content-middle-wrapper {
width: 100%;
height: 1.4rem;
border-bottom: 10px solid #f5f5f5;
padding: 0 0.15rem;
}
.plate-number-box {
width: 100%;
height: 1rem;
padding-top: 0.4rem;
}
.province-box {
width: 0.6rem;
height: 0.6rem;
position: relative;
}
.province-box .province-show {
width: 100%;
height: 100%;
position: absolute;
border-bottom: 1px solid #c7c7c7;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.36rem;
}
.province-box input {
width: 100%;
height: 100%;
opacity: 0;
}
.plateNumber-box {
width: calc(100% - 0.7rem);
height: 0.6rem;
position: relative;
overflow: hidden;
}
.plateNumber-box input {
width: 200%;
height: 100%;
opacity: 0;
color: transparent;
text-indent: -999em;
margin-left: -100%;
}
.plateNumber-box .plateNumber-show {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: space-around;
align-items: center;
}
.plateNumber-show div {
width: 10%;
height: 0.6rem;
border-bottom: 1px solid #c7c7c7;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.3rem;
}
.plateNumber-show div.new-powwer {
width: 0.85rem;
font-size: 0.24rem;
color: #999;
}
.van-checkbox__label {
margin-left: 2px !important;
}
.band-btn {
width: 7rem;
height: 0.88rem;
background-color: #12b7f5;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
margin: 0.5rem auto;
font-size: 0.32rem;
border: none;
border-radius: 0.04rem;
}
.band-btn:disabled {
background-color: #bbb;
}
.auth-code {
width: 4rem;
height: 100%;
font-size: 0.28rem;
}
.send-btn {
width: 1.52rem;
height: 0.6rem;
border-radius: 0.04rem;
border: 0.02rem solid #12b7f5;
position: absolute;
right: 0.3rem;
top: 0;
bottom: 0;
margin: auto;
font-size: 0.24rem;
color: #12b7f5;
display: flex;
justify-content: center;
align-items: center;
}
.send-btn:disabled {
border-color: #999;
color: #999999;
}
.provinceData-wrapper {
width: 7rem;
height: 4rem;
}
.provinceData {
width: 100%;
height: 100%;
padding: 0.33rem 0.1rem 0.2rem 0.14rem;
}
.province-btn {
width: 0.6rem;
height: 0.7rem;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #b5b5b5;
border-radius: 0.04rem;
font-size: 0.28rem;
margin-left: 0.11rem;
margin-bottom: 0.15rem;
border-radius: 0.1rem;
}
.area-wrapper {
width: 100%;
height: auto;
padding: 0.3rem;
background-color: #fff;
margin-top: 0.2rem;
}
.area-wrapper .title {
font-size: 0.26rem;
margin-bottom: 0.3rem;
}
.menu-wrapper {
width: 76%;
height: 0.68rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.menu-wrapper .menu {
width: 2.16rem;
height: 0.68rem;
color: #333333;
border: 1px solid #cecccc;
border-radius: 0.08rem;
font-size: 0.24rem;
display: flex;
align-items: center;
justify-content: center;
}
.menu-wrapper .menu.active {
border-color: #12b7f5;
background-color: #ebf9fe;
color: #12b7f5;
}
.content-car-number {
padding-top: 0.1rem;
}
.content-car-number .car-content-title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0 0.32rem;
margin-bottom: 0.16rem;
}
.content-car-number .car-content-title span {
font-size: 0.34rem;
}
.content-car-number .car-content-title .ze-checkbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.content-car-number .car-content-title .ze-radio-text {
font-size: 0.28rem;
}
.content-car-number .car-content-title .ze-checkbox-icon {
color: #ffedb1 !important;
margin-right: 0.08rem;
}
.content-car-number .content-section .content-section-flex {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-evenly;
align-items: center;
font-size: 0.32rem;
}
.content-car-number .content-section .content-section-flex .blank-border {
height: 0.44rem;
width: 1px;
/*no*/
border-right: 1px solid #ddd;
/*no*/
margin-top: 0.22rem;
/* margin-left: -0.15rem; */
z-index: 1;
}
.content-car-number
.content-section
.content-section-flex
.blank-border.blank-border-first {
margin-top: 0;
}
.content-car-number .content-section .content-section-flex.flex-card {
color: #000;
}
.content-car-number .content-section .content-section-flex.flex-card .flex-btn {
width: 0.88rem;
height: 0.88rem;
border: none;
text-align: center;
background: #fff;
font-size: 0.32rem;
color: #000;
}
.content-car-number
.content-section
.content-section-flex.flex-card
.flex-btns {
display: flex;
background: #fff;
position: relative;
height: 0.88rem;
}
.content-car-number
.content-section
.content-section-flex.flex-card
.flex-btns
button {
width: 0.78rem;
height: 0.88rem;
border: none;
font-size: 0.32rem;
color: #000;
border-radius: 50%;
background: transparent;
z-index: 2;
position: relative;
}
.content-car-number
.content-section
.content-section-flex.flex-card
.flex-btns
button:first-child {
margin-left: 0;
}
.content-car-number .content-section .content-section-flex.flex-card .flex-mid {
margin: 0 0.05rem;
}
.content-car-number
.content-section
.content-section-flex.flex-card
.flex-mid
span {
display: block;
width: 0.1rem;
height: 0.1rem;
border-radius: 20rem;
background: #ddd;
}
.content-car-number .content-section .content-section-flex.flex-card .isClick {
border: 1px solid #12b7f5;
/*no*/
z-index: 50;
border-radius: 0.08rem;
}
.content-car-number
.content-section
.content-section-flex.flex-card
.isNumClick {
border-radius: 0.08rem !important;
border: 1px solid #12b7f5 !important;
/*no*/
z-index: 10;
background-color: #fff !important;
}
.content-car-number .content-section .content-section-flex .flex-card-border {
border: 1px solid #ddd;
/*no*/
border-radius: 0.08rem;
}
.keyboard {
width: 100%;
height: 5.3rem;
position: fixed;
bottom: -5rem;
background: #eeeeee;
z-index: 10;
}
.keyboard.animationDown {
-webkit-animation: slide_dowms 0.3s ease-out;
animation: slide_dowms 0.3s ease-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.keyboard.animationUp {
-webkit-animation: slide_ups 0.3s ease-out;
animation: slide_ups 0.3s ease-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
box-shadow: 1px 0 5px #cccccc;
}
.keyboard .btn-complete {
height: 0.9rem;
text-align: center;
color: #12b7f5;
font-size: 0.3rem;
width: 100%;
background: #fff;
border: none;
border-top: 1px solid #eee;
margin-bottom: 0.3rem;
}
.keyboard .keyboard-row {
margin-top: 0.2rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0 0.08rem;
color: #333;
}
.keyboard .keyboard-row:first-child {
margin-top: 0;
}
.keyboard .keyboard-row .keyboard-row-items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
}
.keyboard .keyboard-row .keyboard-row-bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.keyboard .keyboard-row .keyboard-row-item {
width: 0.66rem;
height: 0.8rem;
background: #fff;
font-size: 0.34rem;
border: 1px solid #ccc;
line-height: 0.8rem;
border-radius: 0.1rem;
color: #333;
}
.keyboard-row-item:disabled {
opacity: 0.7;
}
.keyboard .keyboard-row .keyboard-row-item.bottom {
height: 0.8rem;
width: 0.66rem;
line-height: 0.8rem;
background: #fff;
color: #333;
/*margin-right: 0.08rem;*/
}
.keyboard .keyboard-row .keyboard-row-item.clear {
width: 1rem;
height: 0.8rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.keyboard .keyboard-row .keyboard-row-item.clear img {
width: 0.62rem;
}
.keyboard .keyboard-row .none-botton {
border: none;
height: 0.8rem;
width: 0.66rem;
visibility: hidden;
}
.keyboard button:active {
background: #f4f4f4 !important;
color: #999 !important;
}
@-webkit-keyframes slide_ups {
from {
bottom: -5rem;
}
to {
bottom: 0;
}
}
@keyframes slide_ups {
from {
bottom: -5rem;
}
to {
bottom: 0;
}
}
@-webkit-keyframes slide_dowms {
from {
bottom: 0;
}
to {
bottom: -5rem;
}
}
@keyframes slide_dowms {
from {
bottom: 0;
}
to {
bottom: -5rem;
}
}
</style>到此這篇關(guān)于vue自定義鍵盤實現(xiàn)車牌號的示例代碼的文章就介紹到這了,更多相關(guān)vue 車牌號內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
vue?cli2?和?cli3去掉eslint檢查器報錯的解決
這篇文章主要介紹了vue?cli2?和?cli3去掉eslint檢查器報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)下拉菜單效果，運(yùn)用了hover顯示與隱藏以及定位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了vue中mixins的工具的封裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
解決antd的Form組件setFieldsValue的警告問題
這篇文章主要介紹了解決antd的Form組件setFieldsValue的警告問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家介紹了c++游戲教程使用easyx實現(xiàn)大飛機(jī)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Vue3中從一個頁面(index)傳輸數(shù)值到另一個頁面(form)的方法詳解
在 Vue 3 開發(fā)中,經(jīng)常需要在不同組件或頁面之間傳遞數(shù)據(jù),例如從 index 頁面獲取某個數(shù)值（如 cntr、tradeId）后,將其傳輸?shù)?nbsp;form 頁面進(jìn)行填寫或編輯,本文將介紹幾種常見的數(shù)據(jù)傳輸方法,并為每種方法提供一個小的 Demo 代碼示例,需要的朋友可以參考下2025-02-02
這篇文章主要介紹了VNode虛擬節(jié)點,結(jié)合實例形式分析了VNode虛擬節(jié)點的基本功能、原理與實現(xiàn)方法,需要的朋友可以參考下2023-06-06
我在做一個附件刪除功能的時候發(fā)現(xiàn),明明打印出來附件已經(jīng)沒有數(shù)據(jù)了但是頁面就是不刷新, this.$set()不生效,所以本文小編給大家介紹了vue中this.$set()不更新的解決方法,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了element-ui?table表格底部合計自定義配置過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue+Mockjs模擬curd接口請求的示例詳解,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07