一个简单的车牌输入组件（vue），供大家参考，具体内容如下
代码：
vue代码：
<template>
<div class="pulls">
<!-- 精确车牌搜索 -->
<div class="enterplate">
<div class="enterbox" :style="{width:norightpart==='on'?'100%':''}">
<div :class="['prov',enterplatenumber.input.whitchkey===0?'isentering':'']" @click.stop="enterprov">{{enterplatenumber.input.firstword}}</div>
<div :class="['alb',enterplatenumber.input.whitchkey===1?'isentering':'']" @click.stop="enteralbn">{{enterplatenumber.input.secondword}}</div>
<div :class="['plate',enterplatenumber.input.whitchkey===2?'isentering':'']" :style="{width:norightpart==='on'?'350rpx':''}" @click.stop="enterlastn">{{enterplatenumber.input.lastwords}}</div>
</div>
<div class="donebox">
<div class="doneleft">
<button type="primary" size="small" @click="tosearch">搜索</button>
</div>
<div class="doneright" v-if="norightpart!='on'">
<u-icon name="list-dot"></u-icon>
筛选
</div>
</div>
</div>
<!-- 键盘弹框 -->
<!-- 省简称 -->
<div class="mask" v-if="enterplatenumber.input.showprovince===true" :style="{width:noneedmask==='y'?0:'',height:noneedmask==='y'?0:'',margintop:masktop?masktop/75+'rem':0+'rem'}">
<div class="province" >
<div class="btns">
<button type="primary" size="small" plain @click="hiddenkeybord">取消</button>
<!-- <button type="primary" size="small" plain @click="changekeybord">切换键盘</button> -->
<button type="primary" size="small" plain @click="enterword">确认</button>
</div>
<ul class="keyboard province" id="province">
<li v-for="(item,index) in enterplatenumber.input.provincelist" :key="index" @click.stop="enterpro(item)">{{item.provincename}}</li>
<!-- <li class="delete" @click.stop="deletepro"><i class="icon"></i>删</li> -->
<li class="delete" @click.stop="deletealb"><i class="icon"></i>删</li>
</ul>
</div>
</div>
<!-- 数字字母 -->
<div class="mask" v-if="enterplatenumber.input.showalb===true" :style="{width:noneedmask==='y'?0:'',height:noneedmask==='y'?0:'',margintop:masktop?masktop/75+'rem':0+'rem'}">
<div class="province provinces" >
<div class="btns">
<button type="primary" size="small" plain @click="hiddenkeybord">取消</button>
<!-- <button type="primary" size="small" plain @click="changekeybord">切换键盘</button> -->
<button type="primary" size="small" plain @click="enterword">确认</button>
</div>
<ul class="keyboard number" id="number" >
<li :class="['num',enterplatenumber.input.whitchkey===1?'disabled':'']" v-if="item.isnumber===true" v-for="(item) in enterplatenumber.input.platealblist" :key="item.albname" @click.stop="enteralb(item)">{{item.albname}}</li>
<li v-if="item.isnumber===false" v-for="(item) in enterplatenumber.input.platealblist" :key="item.albname" @click.stop="enteralb(item)">{{item.albname}}</li>
<li class="delete deletes" @click.stop="deletealb"><i class="icon"></i>删</li>
</ul>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.enterplate{
height: 70rpx;
background: #fff;
padding:10rpx 20rpx;
display: flex;
align-items: center;
.enterbox{
width: 73%;
display: flex;
.isentering{
border-color: rgb(57,195,153);
}
div{
width: 70rpx;
height: 70rpx;
line-height: 75rpx;
border:1.5rpx solid rgba(0,0,0,0.15);
border-radius: 10rpx;
background: #fff;
margin-right: 20rpx;
font-size: 30rpx;
text-align: center;
}
.plate{
width: 300rpx;
height: 70rpx;
text-align: left;
text-indent: 10rpx;
}
}
.donebox{
width: 27%;
display: flex;
justify-content: space-between;
align-items: center;
.doneright{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
button{
height: 70rpx;
padding:0 10rpx;
line-height: 70rpx;
}
}
.pulls{
// padding: 0 0 20rpx 0;
background: #fff;
.name{
height: 60rpx;
line-height: 60rpx;
font-size: 28rpx;
color:rgba(0,0,0,0.85);
// font-weight: bold;
}
.platebox{
height: 100rpx;
display: flex;
justify-content: space-between;
.pleft{
width: 50%;
height: 100rpx;
overflow: hidden;
img{
width: 100%;
}
}
.pright{
width: 50%;
height: 100rpx;
padding-left: 10rpx;
border:1rpx solid rgb(57,195,153);
display: flex;
align-items: center;
.late{
font-weight: bold;
font-size: 30rpx;
width: 60%;
height: 100rpx;
line-height: 100rpx;
input{
height: 100%;
}
}
button{
border:1rpx solid rgb(57,195,153);
}
}
}
.mask{
position: fixed;
bottom: 0;
left: 0;
z-index: 9999;
}
// 键盘
.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;
}
.province{
position: relative;
.btns{
width: 100vw;
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;
}
}
}
.provinces{
position: relative;
.btns{
width: 100vw;
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: -428rpx;
left: 0;
button{
margin:0;
}
}
}
.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 + 155rpx);
}
.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 = {
tosearch(){
this.methods('hiddenkeybord',2)
this.$emit('confirmchangeplate')
},
changeplate(){
//展示键盘
this.methods('changeplate')
this.methods('saveoringinplate')
},
//取消
hiddenkeybord(){
this.methods('hiddenkeybord',2)
},
//确定
enterword(){
this.methods('enterword')
this.methods('hiddenkeybord',1)
},
//修改
confirmchangeplate(){
this.$emit('confirmchangeplate')
},
//点击省份输入框
enterprov(){
this.methods('enterprov',true)
},
//点击省份
async enterpro(item){
let isok = await this.methods('enterpro',item)
if(isok){
this.methods('enteralbn',true)
}
},
//删除省份
deletepro(){
this.methods('deletepro')
},
//点击字母输入框
enteralbn(){
this.methods('enteralbn',true)
},
//点击数字
async enteralb(item){
let isok = await this.methods('enteralb',item)
if(isok===2){
this.methods('setkey',2)
}
},
//数字键盘的删除
async deletealb(){
let isok = await this.methods('deletealb')
if(isok === 1){
this.methods('setkey',0)
this.methods('enterprov',true)
this.enterplatenumber.input.firstword = ''
}
if(isok===2){
this.methods('setkey',2)
// this.methods('enteralbn',true)
}
if(isok===3){
this.methods('setkey',1)
// this.methods('enteralbn',true)
this.enterplatenumber.input.secondword = ''
}
},
//点击剩余字母框
enterlastn(){
this.methods('enterlastn',true)
},
//搜索
clicksearch(){
let str1 = this.enterplatenumber.input.firstword
let str2 = this.enterplatenumber.input.secondword
let str3 = this.enterplatenumber.input.lastwords
this.$emit('clicksearch',str1+str2+str3)
},
}
export let watch = {}
methods方法：
export default class {
enterword(){
// this.$emit('update:platenumber', this.platenumber1)
}
hiddenkeybord(val){
if(val===2){
console.log(this.currentplate)
this.platenumber1 = this.currentplate
this.enterplatenumber.input.firstword = this.currentplate.slice(0,1)
this.enterplatenumber.input.secondword = this.currentplate.slice(1,2)
this.enterplatenumber.input.lastwords = this.currentplate.slice(2,9)
this.enterplatenumber.input.showprovince = false
this.enterplatenumber.input.showalb = false
}
if(val===1){
this.enterplatenumber.input.showprovince = false
this.enterplatenumber.input.showalb = false
}
}
enterprov(val){
this.enterplatenumber.input.showprovince = val
this.enterplatenumber.input.showalb = false
this.enterplatenumber.input.whitchkey = 0
}
setkey(val){
this.enterplatenumber.input.whitchkey = val
}
async enterpro(val){
let isok = false
this.enterplatenumber.input.firstword = val.provincename
if(this.enterplatenumber.input.firstword!=''){
isok = true
}
return isok
}
deletepro(){
this.enterplatenumber.input.firstword = ''
}
enteralbn(val){
this.enterplatenumber.input.showalb = val
this.enterplatenumber.input.showprovince = false
this.enterplatenumber.input.whitchkey = 1
}
async enteralb(val){
let isok = 1
if(this.enterplatenumber.input.whitchkey === 1&typeof(val.albname)==='number'){
isok = 1
return
}
if(this.enterplatenumber.input.whitchkey === 1){
isok = 2
this.enterplatenumber.input.secondword = val.albname
}
if(this.enterplatenumber.input.whitchkey === 2){
isok = 3
let str = val.albname.tostring()
if(this.enterplatenumber.input.lastwords.length>5){
uni.showtoast({
icon: "none",
duration: 1000,
position: 'top',
title: "车牌号码最长不可超过8位",
})
return
}else{
this.enterplatenumber.input.lastwords+=str
}
}
return isok
}
enterlastn(val){
this.enterplatenumber.input.showalb = val
this.enterplatenumber.input.showprovince = false
this.enterplatenumber.input.whitchkey = 2
}
async deletealb(){
let isok = 0
if(this.enterplatenumber.input.whitchkey === 1){
this.enterplatenumber.input.secondword = ''
isok = 1
}
if(this.enterplatenumber.input.whitchkey === 2){
let len = this.enterplatenumber.input.lastwords.length
this.enterplatenumber.input.lastwords = this.enterplatenumber.input.lastwords.substr(0, this.enterplatenumber.input.lastwords.length - 1)
len--
console.log(len)
if(len===-1){
if(this.enterplatenumber.input.lastwords===''){
isok = 3
}else{
isok = 2
}
}
}
return isok
}
switchcolorselector () {
this.selectvisible = !this.selectvisible
}
setcolor (color) {
this.currentcolor = color
}
}
model数据：
export let props = ['name','platenumber','norightpart']
export let model = {
currentplate:undefined,
enterplatenumber:{
input:{
firstword:'',
secondword:'',
lastwords:'',
provincelist:[
{provincename:'京',id:'京'},
{provincename:'津',id:'津'},
{provincename:'冀',id:'冀'},
{provincename:'晋',id:'晋'},
{provincename:'蒙',id:'蒙'},
{provincename:'辽',id:'辽'},
{provincename:'吉',id:'吉'},
{provincename:'黑',id:'黑'},
{provincename:'沪',id:'沪'},
{provincename:'苏',id:'苏'},
{provincename:'浙',id:'浙'},
{provincename:'皖',id:'皖'},
{provincename:'闽',id:'闽'},
{provincename:'赣',id:'赣'},
{provincename:'鲁',id:'鲁'},
{provincename:'豫',id:'豫'},
{provincename:'鄂',id:'鄂'},
{provincename:'湘',id:'湘'},
{provincename:'粤',id:'粤'},
{provincename:'桂',id:'桂'},
{provincename:'琼',id:'琼'},
{provincename:'渝',id:'渝'},
{provincename:'川',id:'川'},
{provincename:'贵',id:'贵'},
{provincename:'云',id:'云'},
{provincename:'藏',id:'藏'},
{provincename:'陕',id:'陕'},
{provincename:'甘',id:'甘'},
{provincename:'青',id:'青'},
{provincename:'宁',id:'宁'},
{provincename:'新',id:'新'},
{provincename:'台',id:'台'},
{provincename:'港',id:'港'},
{provincename:'澳',id:'澳'},
{provincename:'使',id:'使'},
{provincename:'领',id:'领'},
{provincename:'警',id:'警'},
{provincename:'学',id:'学'},
],
platealblist:[
{albname:0,id:'0',isnumber:true},
{albname:1,id:'1',isnumber:true},
{albname:2,id:'2',isnumber:true},
{albname:3,id:'3',isnumber:true},
{albname:4,id:'4',isnumber:true},
{albname:5,id:'5',isnumber:true},
{albname:6,id:'6',isnumber:true},
{albname:7,id:'7',isnumber:true},
{albname:8,id:'8',isnumber:true},
{albname:9,id:'9',isnumber:true},
{albname:'a',id:'a',isnumber:false},
{albname:'b',id:'b',isnumber:false},
{albname:'c',id:'c',isnumber:false},
{albname:'d',id:'d',isnumber:false},
{albname:'e',id:'e',isnumber:false},
{albname:'f',id:'f',isnumber:false},
{albname:'g',id:'g',isnumber:false},
{albname:'h',id:'h',isnumber:false},
{albname:'j',id:'j',isnumber:false},
{albname:'k',id:'k',isnumber:false},
{albname:'l',id:'l',isnumber:false},
{albname:'m',id:'m',isnumber:false},
{albname:'n',id:'n',isnumber:false},
{albname:'p',id:'p',isnumber:false},
{albname:'q',id:'q',isnumber:false},
{albname:'r',id:'r',isnumber:false},
{albname:'s',id:'s',isnumber:false},
{albname:'t',id:'t',isnumber:false},
{albname:'u',id:'u',isnumber:false},
{albname:'v',id:'v',isnumber:false},
{albname:'w',id:'w',isnumber:false},
{albname:'x',id:'x',isnumber:false},
{albname:'y',id:'y',isnumber:false},
{albname:'z',id:'z',isnumber:false},
{albname:'学',id:'学',isnumber:false},
{albname:'港',id:'港',isnumber:false},
{albname:'澳',id:'澳,isnumber:false'}
],
showprovince:false, //展示省份
showalb:false, //展示字母键盘
whitchkey:0
}
},
selectvisible: false,
}
export let computed = {
platenumber1 : {
get () {
return this.platenumber||''
},
set (val) {
this.$emit('update:platenumber', val)
}
}
}
因为这里用了独家的框架，所以根据需要把相应的生命周期函数放到正常的vue项目的位置，把event就写成正常的函数，methods就是i正常的methods里面的方法，model就是data里return的数据
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。
黄山市民网：https://www.huangshanshimin.com/
