vue車牌輸入元件使用方法詳解
阿新 • • 發佈：2021-06-30
一個簡單的車牌輸入元件（），供大家參考，具體內容如下
效果圖：
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></di
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資料：
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: ['京','津','冀','晉','蒙','遼','吉','黑','滬','蘇','浙','皖','閩','贛','魯','豫','鄂','湘','粵','桂','瓊','渝','川','貴','雲','藏','陝','甘','青','寧','新','臺','港','澳','使','領','警','學'],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','學','澳']
},}
export let computed = {
plateNumber1 : {
get () {
return this.plateNumber||''
},set (val) {
this.$emit('update:plateNumber',val)
}
}
}
因為這裡用了獨家的框架，所以根據需要把相應的生命週期函式放到正常的vue專案的位置，把event就寫成正常的函式，methods就是i正常的methods裡面的方法，model就是data裡return的資料。
關於vue.元件的教程，請大家點選專題vue.js元件學習教程進行學習。
更多vue學習教程請閱讀專題《vue實戰教程》
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。