vue車牌輸入組件使用方法詳解
一個(gè)簡(jiǎn)單的車牌輸入組件(vue),供大家參考,具體內(nèi)容如下
效果圖:
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">確認(rèn)</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數(shù)據(jù):
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: ['京', '津', '冀', '晉', '蒙', '遼', '吉', '黑', '滬', '蘇', '浙', '皖', '閩', '贛', '魯', '豫', '鄂', '湘', '粵', '桂', '瓊', '渝', '川', '貴', '云', '藏', '陜', '甘', '青','寧','新','臺(tái)','港','澳','使','領(lǐng)','警','學(xué)'], 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', '學(xué)', '港', '澳'] }, } 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.js組件的教程,請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
更多vue學(xué)習(xí)教程請(qǐng)閱讀專題《vue實(shí)戰(zhàn)教程》
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 使用Vue3+Vant組件實(shí)現(xiàn)App搜索歷史記錄功能(示例代碼)
- vue elementui 實(shí)現(xiàn)搜索欄公共組件封裝的實(shí)例代碼
- Vue2.x通用條件搜索組件的封裝及應(yīng)用詳解
- vue組件實(shí)踐之可搜索下拉框功能
- vue下拉菜單組件(含搜索)的實(shí)現(xiàn)代碼
- vue.js項(xiàng)目 el-input 組件 監(jiān)聽回車鍵實(shí)現(xiàn)搜索功能示例
- 基于vue實(shí)現(xiàn)可搜索下拉框定制組件
- vue組件實(shí)現(xiàn)可搜索下拉框擴(kuò)展
- vue2.0多條件搜索組件使用詳解
- vue車牌搜索組件使用方法詳解
相關(guān)文章
Vue Echarts實(shí)現(xiàn)圖表輪播圖以及圖表組件封裝和節(jié)流函數(shù)優(yōu)化講解
這篇文章主要介紹了在Vue中優(yōu)雅的使用Echarts實(shí)現(xiàn)圖表輪播圖、Echarts圖表組件封裝、節(jié)流函數(shù)優(yōu)化圖表性能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-01-01解決vue報(bào)錯(cuò):Do?not?mutate?vuex?store?state?outside?mutati
這篇文章主要介紹了解決vue報(bào)錯(cuò):Do?not?mutate?vuex?store?state?outside?mutation?handlers問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05Vue利用自定義指令實(shí)現(xiàn)按鈕權(quán)限控制
這篇文章主要為大家詳細(xì)介紹了Vue如何利用自定義指令實(shí)現(xiàn)按鈕權(quán)限控制效果,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,需要的可以參考下2023-05-05vue實(shí)現(xiàn)三級(jí)導(dǎo)航展示和隱藏
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)三級(jí)導(dǎo)航展示和隱藏,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08vue3使用iframe嵌入ureport2設(shè)計(jì)器,解決預(yù)覽時(shí)NullPointerException異常問(wèn)題
這篇文章主要介紹了vue3使用iframe嵌入ureport2設(shè)計(jì)器,解決預(yù)覽時(shí)NullPointerException異常問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue-treeselect(適配Vue3.2)及Element-plus的TreeSelect組件使用
這篇文章主要介紹了vue-treeselect(適配Vue3.2)及Element-plus的TreeSelect組件使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05Element的Pagination分頁(yè)sync問(wèn)題小結(jié)
本文主要介紹了Element的Pagination分頁(yè)sync問(wèn)題小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07