vue车牌输入组件使用方法详解

一个简单的车牌输入组件(vue),供大家参考,具体内容如下

效果图:

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

</div>

<div class="bords" v-if="plateInput.input.dialogVisible">

<div class="bor">

<div class="btns">

<button type="primary" size="small" plain @click="hiddenKeybord">取消</button>

<button type="primary" size="small" plain @click="enterWord">确认</button>

</div>

<ul class="keyboard province" id="province" v-if="plateInput.input.dialogVisible && plateInput.input.type === 'p1'">

<li v-for="i in Keyboard.province" @click.stop="clickKeyboard(i)">{{i}}</li>

<li class="delete" @click.stop="clickDelete"><i class="icon"></i>删</li>

</ul>

<ul class="keyboard province" id="number" v-if="plateInput.input.dialogVisible && plateInput.input.type !== 'p1'">

<li v-for="i in Keyboard.number" :class="{num: plateInput.input.type === 'p2' && parseInt(i) >= 0 && parseInt(i) <= 9}" @click.stop="clickKeyboard(i)">{{i}}</li>

<li class="delete deletes" @click.stop="clickDelete"><i class="icon"></i>删</li>

</ul>

</div>

</div>

</div>

</template>

<style scoped lang="scss">

.enTer{

.plateInput{

padding:0 20rpx;

display: flex;

justify-content: space-around;

.item{

width: 60rpx;

height: 75rpx;

border:1rpx solid #FF5100;

border-radius: 10rpx;

display: flex;

justify-content: center;

align-items: center;

font-size: 28rpx;

}

.active{

border-color: #3399ff;

}

}

.bords{

position: fixed;

bottom: 0;

left: 0;

z-index: 999;

.bor{

position: relative;

.btns{

width: 100%;

height: 70rpx;

background: #fff;

border-top:1rpx solid rgba(0,0,0,0.05);

position: absolute;

display: flex;

justify-content: space-between;

align-items: center;

top: -70rpx;

left: 0;

button{

margin:0;

}

}

}

// 键盘

.keyboard{

position:fixed;

bottom:0;

left:0;

background-color:#ced2d9;

width:100%;

height:360rpx;

margin:0;

padding:0;

font-size:36rpx;

z-index:1;

}

.keyboard li {

list-style:none;

border-radius:10rpx;

}

.keyboard li {

float:left;

background-color:#fefefe;

margin-left:15rpx;

margin-top:15rpx;

}

.num{

color: rgba(0,0,0,0.15);

}

.province{

position: relative;

}

.provinces{

position: relative;

}

.province li{

width:calc((100% - 15rpx * 11) / 10);

height:calc((100% - 15rpx * 5) / 4);

display:flex;

display:-webkit-flex;

align-items:center;

-webkit-align-items:center;

justify-content: center;

-webkit-justify-content: center;

}

.province li.delete{

width:calc((100% - 15rpx * 11) / 10 * 2 + 15rpx);

}

.province li.deletes{

width:calc((100% - 15rpx * 11) / 10 * 2 + 90rpx);

}

.disabled{

color: rgba(0,0,0,0.15);

}

}

}

</style>

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.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 vue车牌输入组件使用方法详解 的全部内容, 来源链接: utcz.com/p/220904.html

回到顶部