<template> <div class="license-plate-panel"> <div class="input-area"> <div v-for="(num, index) in 8" :key="num" @click="selectHandle(index)" :class="{ active: selected === index }" class="input-text"> {{ licensePlate[index] }} </div> </div> <div class="keyboard-panel"> <div class="tool-bar"> <div @click="cancelHandle">取消</div> <div @click="okHandle" class="btn-ok" :class="{ right: isRight }"> 确定 </div> </div> <div class="text-panel"> <div class="row" v-if="selected !== 0"> <div class="text-key" v-for="text in carNum" :key="text" @click="numHandle(text)" :class="{'disabled': numDisable}"> {{ text }} </div> </div> <div class="row" v-for="(keys, row) in carTxt" :key="row" v-if="selected === 0"> <div v-for="text in keys" :key="text" @click="keyHandle(text)" class="text-key" :class="{'selected': licensePlate[selected] === text}"> {{ text }} </div> <template v-if="row === carTxt.length - 1"> <div style="flex: 1"></div> <div class="text-key del-key" @click="deleteKey()"> 删除 </div> </template> </div> <div class="row" v-for="(keys2, row2) in carLetter" :key="row2" v-if="selected !== 0"> <div v-for="text in keys2" :key="text" @click="keyHandle(text)" :class="{'text-key': true, 'disabled': false , 'selected': licensePlate[selected] === text }"> {{ text }} </div> <template v-if="row2 === carLetter.length - 1"> <div style="flex: 1"></div> <div class="text-key del-key" @click="deleteKey()"> 删除 </div> </template> </div> </div> </div> </div> </template> <script> export default { name: 'LicensePlatNum', props: { code: { type: [String,Object], default: '' } }, watch: { code: { handler(newVal,oldVal) { console.log(newVal,'nnnnnnnn') console.log('nnnnnnnn1111111') const codes = newVal.split(''); for (let i = 0; i < 8; i++) { this.licensePlate[i] = codes[i] || ''; } let index = codes.length - 1; if (index < 0) { index = 0; } this.selectHandle(index); }, immediate: true, deep: true } }, data() { return { licensePlate: { 0: '', 1: '', 2: '', 3: '', 4: '', 5: '', 6: '', 7: '' }, selected: 0, keyRows: [], keyLast: [], carTxt: [ ['陕', '京', '沪', '粤', '津', '冀', '豫', '云', '辽', '黑'], ['皖', '鲁', '苏', '浙', '赣', '鄂', '桂', '甘', '晋', '湘'], ['蒙', '吉', '闽', '贵', '渝', '川', '青', '琼', '宁', '藏'], [ '新', '使', '领'] ], numDisable: true, disableList: { // 1: ['Z'] }, carNum: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'], carLetter: [ ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K'], ['L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V'], ['W', 'X', 'Y', 'Z'], ['挂', '学', '警', '港', '澳'] ] }; }, computed: { isRight() { // const val = Object.values(this.licensePlate).join(''); // return /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/.test( // val // ); return true } }, mounted() { const codes = this.code.split(''); for (let i = 0; i < 8; i++) { this.licensePlate[i] = codes[i] || ''; } let index = codes.length - 1; if (index < 0) { index = 0; } this.selectHandle(index); }, methods: { getStyle(item) { return 'disable'; // return { // 'text-key-last': this.selected === 0, // 'disable': !this.isEnable(item), // 'selected': this.licensePlate[this.selected] === item // }; }, getNumStyle(item) { return { disable: this.numDisable, selected: this.licensePlate[this.selected] === item }; }, isEnable(item) { const _dis = this.disableList[this.selected]; console.log(item,_dis,'-------') if (_dis) { console.log(_dis.indexOf(item) !== -1, item); return _dis.indexOf(item) !== -1; } return false; }, selectHandle(item) { this.selected = item; console.log(item,this.selected, '-------index------') if (item === 0) { // this.keyRows = this.carTxt; } else { // this.keyRows = this.carLetter; this.numDisable = item === 1; } }, keyHandle(text) { console.log(text,'ttttttt') if (!this.isEnable(text)) { this.licensePlate[this.selected] = text; const next = this.selected + 1; if (next <= 7) { this.selectHandle(next); } } }, numHandle(text) { if (!this.numDisable) { this.licensePlate[this.selected] = text; const next = this.selected + 1; if (next <= 7) { this.selectHandle(next); } } }, deleteKey() { if (this.licensePlate[this.selected] !== '') { this.licensePlate[this.selected] = ''; } else if (this.selected !== 0) { this.selectHandle(this.selected - 1); this.licensePlate[this.selected] = ''; } }, cancelHandle() { this.claer(); this.$emit('cancel'); }, claer() { this.licensePlate = { 0: '', 1: '', 2: '', 3: '', 4: '', 5: '', 6: '', 7: '' }; this.selected = 0; }, okHandle() { if (this.isRight) { const val = Object.values(this.licensePlate).join(''); this.claer(); this.$emit('ok', val); } } } }; </script> <style lang="less"> .license-plate-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10000; background-color: #fff; border-top: 1px solid #ddd; .input-area { display: flex; padding: 5vh 0; box-sizing: border-box; justify-content: center; .input-text { width: 10vw; height: 10vw; line-height: 10vw; box-sizing: border-box; border-top: 1px solid #dcdee2; border-right: 1px solid #dcdee2; border-bottom: 1px solid #dcdee2; text-align: center; font-size: 32upx; &.active { border: 1px solid #2db7f5 !important; } &:first-child { overflow: hidden; position: relative; &::after { content: ''; position: absolute; bottom: -5px; right: -5px; width: 10px; height: 10px; background-color: #dcdee2; transform: rotate(45deg); } &.active::after { background-color: #2db7f5; } } &:last-child { margin-left: 5px; border: 1px dashed #dcdee2; &.active { border: 1px dashed #2db7f5 !important; } } &:nth-child(2) { margin-right: 25px; position: relative; &::after { content: ''; position: absolute; border-radius: 50%; top: 50%; right: -15px; transform: translateY(-50%); width: 5px; height: 5px; background-color: #000; } } &:first-child, &:nth-child(3) { border-left: 1px solid #dcdee2; } } } .keyboard-panel { position: relative; bottom: 0; border-top: 1px solid #eef0f4; background: #eeeeee; box-sizing: border-box; width: 100%; .tool-bar { display: flex; font-size: 32upx; justify-content: space-between; background-color: #fff; padding: 10px 15px; } .text-panel { padding: 0 1vw 5px 1vw; } .row { display: flex; margin: 1vw 0; } .text-key { display: inline-block; text-align: center; font-size: 32upx; width: 8.8vw; margin: 0 0.5vw; padding: 10px 0; box-shadow: 0 1px 2px #dddddd; border-radius: 4px; background-color: #ffffff; text-align: center; flex-shrink: 0; flex-grow: 0; } .text-key.disabled { background-color: #f1f1f1; color: #bebebe; } .text-key.selected { background-color: #2db7f5; color: #fff; } .del-key { width: 19vw; color: red; } .btn-ok { color: #c5c8ce; &.right { color: #00aaff; } } } } </style>