最完整版本
<template> <view @tap.stop="prevClose"> <view class="payment_head"> <view class="head_des"> <view class="num"> 车牌号 </view> <view class="reset" @click="reset"> 重置 </view> </view> </view> <!-- 车牌号码输入框 --> <view class="input_carNumber"> <!-- 车牌号头两位 --> <view class="carNumber-items"> <!-- style='{{cars.carnumStyle1}}' --> <view class="carNumber-item" @click='openKeyboard' id="0" :class="currentFocusIndex==0?'plate-nums-foc':''">{{list[0] || ''}}</view> <view class="carNumber-item" @click='openKeyboard' id="1" :class="currentFocusIndex==1?'plate-nums-foc':''">{{list[1] || ''}}</view> <!-- 分隔圆点 --> <view class='carNumber_point'></view> <!-- 常规 --> <view class="carNumber-item" @click='openKeyboard' id="2" :class="currentFocusIndex==2?'plate-nums-foc':''" >{{list[2] || ''}}</view> <view class="carNumber-item" @click='openKeyboard' id="3" :class="currentFocusIndex==3?'plate-nums-foc':''">{{list[3] || ''}}</view> <view class="carNumber-item" @click='openKeyboard' id="4" :class="currentFocusIndex==4?'plate-nums-foc':''">{{list[4] || ''}}</view> <view class="carNumber-item" @click='openKeyboard' id="5" :class="currentFocusIndex==5?'plate-nums-foc':''">{{list[5] || ''}}</view> <view class="carNumber-item" @click='openKeyboard' id="6" :class="currentFocusIndex==6?'plate-nums-foc':''">{{list[6]}}</view> <!-- 新能源 --> <view class="carNumber-item " :class="[currentFocusIndex==7?'plate-nums-foc':'',status ? '': 'carNumber-item-newpower']" id="7" @click='openKeyboard'> <view v-if="!status" @click='showPowerBtn'> <view class="carNumber-newpower-add">+</view> <view class="new-name">新能源</view> </view> <view v-if="status"> {{list[7]|| ''}} </view> </view> </view> </view> <!-- 虚拟键盘 --> <!-- 虚拟键盘 --> <view class="keyboard" v-show='KeyboardState'> <view class="keyboardClose" @click.stop='closeKeyboard'> <view class="keyboardClose_btn" >完成</view> </view> <!-- 省份简写键盘 --> <view class="keyboard-item" v-if="carnumType==1"> <view class="keyboard-line" v-for=" (item,index) in provinces" :key="index"> <view v-if="((provinces.length -1) == index)" class="keyboard-switch" @click='keyboardSwitch'>ABC</view> <view class="keyboard-btn" @click.stop='bindChoose(1,items)' v-for="(items,key) in item" :key='key'>{{items}}</view> </view> <view class="keyboard-del" @click='bindDelChoose'> <image src="../../static/image/delete.png" class="icon-shanchu" mode="aspectFill"/> </view> </view> <!-- 车牌号码选择键盘 --> <view class="keyboard-item iscarnumber" v-if="carnumType==2"> <view class="keyboard-line" v-for="(item,index) in numbers" :key="index"> <view v-if="((numbers.length -1) === index)" class="keyboard-switch" @tap.stop='keyboardSwitch'>省份</view> <view class="keyboard-btn" @click.stop='bindChoose(2, items)' v-for="(items,key) in item" :key='key'>{{items}}</view> </view> <view class="keyboard-del" @click='bindDelChoose'> <image src="../../static/image/delete.png" class="icon-shanchu" mode="aspectFill"/> </view> </view> </view> </view> </template> <script> export default { data(){ return{ maxLength: 8, isAgreeTerms: true, //是否同意条款 // 省份简写 provinces: [ ["京", "津", "渝", "沪", "冀", "晋", "辽", "吉", "黑", "苏"], ["浙", "皖", "闽", "赣", "鲁", "豫", "鄂", "湘", "粤", "琼"], ["川", "贵", "云", "陕", "甘", "青", "蒙", "桂", "宁", "新"], ["藏", "使", "领", "警", "学", "港", "澳"] ], // 车牌输入 numbers: [ ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"], ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"], ["A", "S", "D", "F", "G", "H", "J", "K", "L"], ["Z", "X", "C", "V", "B", "N", "M"] ], // carnum: ["", "", "", "", "", "", "",""], //存储每个输入框的车牌号 currentFocusIndex: 0, carnumType: 1, cars: null, KeyboardState: false, status :this.keyStatus, list:this.carnum } }, mounted() { console.log(this.list,this.list.length) if(this.list.length==7||this.list==[]||this.list==''){ this.status =false }else{ this.status =true } }, // computed: { // list: { // get() { // return JSON.parse(JSON.stringify(this.carnum)); // } // } // }, props:{ keyStatus: { type: Boolean, default: false, // twoWay: true }, isxin: { type: Boolean, default: true, // twoWay: true }, carnum: { type: Array, default: [], //存储每个输入框的车牌号 // twoWay: true }, // KeyboardState: { // type: Boolean, // default: false, // // twoWay: true // }, //键盘状态, isUploadPage: { type: Boolean, default: false } }, methods:{ //阻止车牌键盘关闭 prevClose () { this.KeyboardState = true }, reset(){ this.list=[]; this.currentFocusIndex=0 this.carnumType = 1 this.$emit('setCarNum',this.list) }, // 选中点击设置，输入内容，焦点位置自动后移一位 bindChoose(numType, e) { //输入内容 var focusIndex = this.currentFocusIndex; this.list[focusIndex] = e; var dstFocusIndex = focusIndex; if (!this.status) { if (focusIndex < (this.list.length - 1)) { dstFocusIndex = parseInt(focusIndex) + 1; } } if (this.status) { if (focusIndex < (this.list.length )) { dstFocusIndex = parseInt(focusIndex) + 1; } } this.openKeyboard() console.log(111,this.status,focusIndex,this.list, e) this.$emit('setCarNum',this.list) }, //删除内容 bindDelChoose() { var focusIndex = this.currentFocusIndex; this.list.splice(focusIndex,1) this.list[focusIndex] = ""; if (this.currentFocusIndex ==0) { return }else{ this.currentFocusIndex -- ; } //修复问题 if(this.currentFocusIndex == 0){ this.carnumType = 1 } }, showPowerBtn() { this.status = true; this.KeyboardState = true; }, //关闭键盘 closeKeyboard() { this.KeyboardState = false; }, //显示键盘 openKeyboard(e) { console.log(e) var id = e?e.currentTarget.id:''; if ( this.currentFocusIndex===7) { this.status = true; } if(id){ this.currentFocusIndex=parseInt( id) } else if(this.list[this.currentFocusIndex]) { this.currentFocusIndex++; } if(this.currentFocusIndex==8){ this.KeyboardState=false; } else{ if (this.currentFocusIndex ==0 ){ this.carnumType = 1 }else{ this.carnumType = 2 } } console.log(this.currentFocusIndex, this.carnumType) // let id = this.currentFocusIndex; // this.carnumFocus(id); }, keyboardSwitch (e) { if (this.currentFocusIndex == '0') { this.carnumType = 1 }else{ this.carnumType = 2 } }, } } </script> <style lang="less" scoped> .payment_head { margin-left: 20rpx; margin-right: 20rpx; margin-top: 20rpx; background-color: #fff; // height: 161rpx; padding: 30rpx 20rpx 38rpx 20rpx; } .head_des { display: flex; justify-content: space-between; // padding:30rpx 20rpx 38rpx 20rpx; .num { font-size: 28rpx; color: #011a37; } .reset { font-size: 28rpx; color: #006af1; } } .line-horizontal { height: 1rpx; background: #EDEEF0; } .but-common { height: 90rpx; line-height: 90rpx; border-radius: 55rpx; color: #FFFFFF; text-align: center; font-size: 34rpx !important; background: #0069F0; } .but-common.on { background: #E7E7E7; } .none-border-btn::after { border: none; border-radius: 0; } .bg-white { background: white; } .position-relative { position: relative; } .line-vertical { width: 1px; background: #F2F2F2; } .ml30 { margin-left: 30rpx; } .mr30 { margin-right: 30rpx; } .mt30 { margin-top: 30rpx; } .mb30 { margin-bottom: 30rpx; } .flex-row { display: flex; flex-direction: row; } .flex-column { display: flex; flex-direction: column; } .flex-row-wrap { display: flex; flex-flow: row wrap; } .flex-column-wrap { display: flex; flex-flow: column wrap; } .none-border-btn::after { border: none; border-radius: 0; } .placeholder-Color { color: #8B8A99; } .white-space-nowrap { white-space: nowrap; } /* 输入框-车牌号*/ .input_carNumber { border-radius: 4rpx; background: #fff; position: relative; margin: 0 20rpx 20rpx 20rpx; padding-left: 20rpx; padding-bottom: 20rpx; } .carUnmberContainter { border: none; // padding: 0; } /* 车牌号码 */ .carNumber-items { text-align: center; width: 100%; height: 100%; display: flex; /*设置显示样式**/ align-items: center; /**子view垂直居中*/ vertical-align: ceter; justify-content: space-between; } /* 分隔圆点 */ .carNumber_point { width: 12rpx; height: 12rpx; background: #ccc; border-radius: 6rpx; margin: 0rpx 4rpx; } .carNumber-item { width: 68rpx; height: 88rpx; font-size: 36rpx; text-align: center; border: 1px solid #ccc; border-radius: 2rpx; line-height: 80rpx; display: inline-block; vertical-align: middle; margin-right: 12rpx; } /* 新能源 */ .carNumber-item-newpower { border: 1px dashed #CCCCCC; color: #D8D8D8; font-size: 16rpx; line-height: 22rpx; } /* 虚拟键盘 */ .keyboard { height: auto; background: #d1d5d9; position: fixed; bottom: 0; width: 100%; left: 0; z-index: 100; } .keyboard-item { padding: 10rpx 0 5rpx 0; position: relative; display: block; } /* 关闭虚拟键盘 */ .keyboardClose { height: 70rpx; background-color: #EEEEEE; overflow: hidden; } .keyboardClose_btn { float: right; line-height: 70rpx; font-size: 30rpx; padding-right: 30rpx; color: #2667D7; } /* 虚拟键盘-省缩写 */ /* 虚拟键盘-行 */ .keyboard-line { margin: 0 auto; text-align: center; } .iscarnumber .keyboard-line { margin-left: 5rpx; margin: 0 auto; text-align: center; } /* 虚拟键盘-单个按钮 */ .keyboard-btn { font-size: 34rpx; color: #333333; background: #fff; display: inline-block; padding: 18rpx 0; width: 63rpx; text-align: center; box-shadow: 0 2rpx 0 0 #999999; border-radius: 10rpx; margin: 5rpx 6rpx; /* background: red; */ } /* 虚拟键盘-删除按钮 */ .keyboard-del { color: #333333; width: 63rpx; background: #A7B0BC; display: flex; align-items: center; justify-content: center; padding: 12rpx 12rpx; box-shadow: 0 2rpx 0 0 #999999; border-radius: 8rpx; position: absolute; bottom: 14rpx; right: 24rpx; } .icon-shanchu { width: 42rpx; height: 42rpx; } .keyboard-switch { width: 48px; font-size: 14px; color: #333333; background: #A7B0BC; display: inline-block; margin: 4rpx 4rpx; padding: 18rpx 0; box-shadow: 0 2rpx 0 0 #999999; border-radius: 10rpx; position: absolute; bottom: 10rpx; left: 6rpx; } .carNumber-newpower-add { font-size: 44rpx; margin: 14rpx 0; } .new-name { font-size: 18rpx; } .plate-nums-foc{ border: 2rpx solid #006AF1; } </style>