vue车牌输入组件使用方法详解
作者：contour
这篇文章主要为大家详细介绍了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实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。