溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
vue車牌搜索組件使用方法是怎樣的，針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。
一個(gè)簡單的車牌輸入組件（vue），供大家參考，具體內(nèi)容如下
代碼：
vue代碼：
<template>
<div class="pulls">
<!-- 精確車牌搜索 -->
<div class="enterPlate">
<div class="enterBox" :>
<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':'']" : @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" :>
<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">確認(rèn)</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>
<!-- 數(shù)字字母 -->
<div class="MASK" v-if="EnterPlateNumber.input.showAlb===true" :>
<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">確認(rèn)</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')
},
//點(diǎn)擊省份輸入框
enterProv(){
this.methods('enterProv',true)
},
//點(diǎn)擊省份
async enterPro(item){
let isOk = await this.methods('enterPro',item)
if(isOk){
this.methods('enterAlbn',true)
}
},
//刪除省份
deletePro(){
this.methods('deletePro')
},
//點(diǎn)擊字母輸入框
enterAlbn(){
this.methods('enterAlbn',true)
},
//點(diǎn)擊數(shù)字
async enterAlb(item){
let isOk = await this.methods('enterAlb',item)
if(isOk===2){
this.methods('setKey',2)
}
},
//數(shù)字鍵盤的刪除
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 = ''
}
},
//點(diǎn)擊剩余字母框
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: "車牌號(hào)碼最長不可超過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數(shù)據(jù)：
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:'臺(tái)',id:'臺(tái)'},
{provinceName:'港',id:'港'},
{provinceName:'澳',id:'澳'},
{provinceName:'使',id:'使'},
{provinceName:'領(lǐng)',id:'領(lǐng)'},
{provinceName:'警',id:'警'},
{provinceName:'學(xué)',id:'學(xué)'},
],
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:'學(xué)',id:'學(xué)',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)
}
}
}因?yàn)檫@里用了獨(dú)家的框架，所以根據(jù)需要把相應(yīng)的生命周期函數(shù)放到正常的vue項(xiàng)目的位置，把event就寫成正常的函數(shù)，methods就是i正常的methods里面的方法，model就是data里return的數(shù)據(jù)
關(guān)于vue車牌搜索組件使用方法是怎樣的問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼