<template>
<!-- 输入车牌号组件 -->
<div class="keyboard">
<div class="input-box" @click="clickShowKeyboard">
<li>{{first}}</li>
<li>{{numArr[0]}}</li>
<li>{{numArr[1]}}</li>
<li>{{numArr[2]}}</li>
<li>{{numArr[3]}}</li>
<li>{{numArr[4]}}</li>
<li>{{numArr[5]}}</li>
<li v-if="isChecked">{{numArr[6]}}</li>
</div>
<!-- 选择车牌号 首个汉字键盘 弹出层 -->
<div class="plate_number">
<van-popup
v-model="show_chinese"
position="bottom"
:overlay="false"
overlay-class="displayNone"
>
<div class="plate_chinese_box">
<div class="close-box">
<div @click.stop="close_keyboard">取消</div>
<div @click.stop="close_keyboard">完成</div>
</div>
<!-- 点击对应的汉字，进行输入 -->
<van-button
size="small"
v-for="(item, index) in ChineseList"
:key="item.id"
@click="checkChinese(index)"
>
{{item.name}}
<img v-if="item.id == 99" src="./del.png" alt="" style="width:20px;height:20px; margin-top: 3px;">
</van-button>
</div>
</van-popup>
</div>
<!-- 英文 数字 键盘 -->
<div class="allBoard">
<van-popup
v-model="show_allBoard"
position="bottom"
:overlay="false"
overlay-class="displayNone"
>
<div class="plate_number_box">
<div class="close-box" >
<div @click.stop="close_keyboard">取消</div>
<div @click.stop="close_keyboard">完成</div>
</div>
<!-- 点击对应的字母或数字，进行输入 -->
<van-button
size="small"
v-for="(item, index) in English_Number"
:key="item.id"
:disabled="item.id!==99&&item.name <10&&!numArr[0]"
@click="checkEnglish_num(index)"
>
{{item.name}}
<img v-if="item.id == 99" src="./del.png" alt="" style="width:20px;height:20px; margin-top: 3px;"/>
</van-button>
</div>
</van-popup>
</div>
</div>
</template>
<script>
import { Button,Popup } from "vant";
export default {
name:'LicenseKeyBoard',
components:{
[Button.name]:Button,
[Popup.name]:Popup,
},
props:{
isChecked:{
type:Boolean,
default:false
}
},
data(){
return{
showKeyboard: true, //车牌号输入框是否聚焦
show_chinese:false, //是否显示汉字键盘
show_allBoard:false, //是否显示英文数字键盘
ChineseList:[
{name:'京',id:1},
{name:'津',id:2},
{name:'冀',id:3},
{name:'晋',id:4},
{name:'蒙',id:5},
{name:'辽',id:6},
{name:'吉',id:7},
{name:'黑',id:8},
{name:'沪',id:9},
{name:'苏',id:10},
{name:'浙',id:11},
{name:'皖',id:12},
{name:'闽',id:13},
{name:'赣',id:14},
{name:'鲁',id:15},
{name:'豫',id:16},
{name:'鄂',id:17},
{name:'湘',id:18},
{name:'粤',id:19},
{name:'桂',id:20},
{name:'琼',id:21},
{name:'渝',id:22},
{name:'川',id:23},
{name:'贵',id:24},
{name:'云',id:25},
{name:'藏',id:26},
{name:'陕',id:27},
{name:'甘',id:28},
{name:'青',id:29},
{name:'宁',id:30},
{name:'新',id:31},
{name:'台',id:32},
{name:'港',id:33},
{name:'澳',id:34},
{name:'使',id:35},
{name:'领',id:36},
{name:'警',id:37},
{name:'学',id:38},
{name:'',id:99},
],
English_Number:[
{name:'1',id:39},
{name:'2',id:40},
{name:'3',id:41},
{name:'4',id:42},
{name:'5',id:43},
{name:'6',id:44},
{name:'7',id:45},
{name:'8',id:46},
{name:'9',id:47},
{name:'0',id:48},
{name:'Q',id:49},
{name:'W',id:50},
{name:'E',id:51},
{name:'R',id:52},
{name:'T',id:53},
{name:'Y',id:54},
{name:'U',id:55},
{name:'I',id:56},
{name:'O',id:57},
{name:'P',id:58},
{name:'A',id:59},
{name:'S',id:60},
{name:'D',id:61},
{name:'F',id:62},
{name:'G',id:63},
{name:'H',id:64},
{name:'J',id:65},
{name:'K',id:66},
{name:'L',id:67},
{name:'Z',id:68},
{name:'X',id:69},
{name:'C',id:70},
{name:'V',id:71},
{name:'B',id:72},
{name:'N',id:73},
{name:'M',id:74},
{name:'警',id:37},
{name:'学',id:38},
{name:'',id:99},
],
plate_number: '', //车牌号
first:'',
numArr:[],
}
},
methods: {
// 唤起键盘
clickShowKeyboard(){
if(!this.first){
this.show_chinese = true;
}else{
this.show_chinese = false;
this.show_allBoard = true;
}
},
// 选择车牌号前面的汉字
checkChinese(index){
// 如果点击删除键，删除第一个格的内容
if(this.ChineseList[index].id == 99){
this.first = ''
}else{
// 把选中的字赋值给第一个格，并且切换键盘
this.first = this.ChineseList[index].name;
this.show_chinese = false;
this.show_allBoard = true;
}
},
// 选择车牌号后面的数字和字母
checkEnglish_num(index){
// 如果点击删除键，删除 numArr 的最后一个值
if(this.English_Number[index].id == 99){
this.numArr.pop()
// 如果 numArr 里面被删的没有值了，切换键盘
if(this.numArr.length == 0){
this.show_chinese = true;
this.show_allBoard = false;
}
}else{
// 把选中的值 push 到 numArr 内
this.numArr.push(this.English_Number[index].name)
// 如果 numArr 中的值超过 7 个（车牌号的最大位数），删除最后一个
if(this.isChecked){
if(this.numArr.length > 7){
this.numArr.pop()
}
}else{
if(this.numArr.length > 6){
this.numArr.pop()
}
}
}
},
// 关闭虚拟键盘
close_keyboard(){
this.show_chinese = false;
this.show_allBoard = false;
if(this.first&&this.numArr.length>=6){
const num = this.numArr.join('')
const str = this.first + num
// 抛出车牌号
this.$emit('handlCarNumber', str)
}
}
},
}
</script>
<style lang="less" scoped>
.keyboard{
min-width: 380px;
position: absolute;
top:18px;
left: 200px;
}
// 车牌号 & 虚拟键盘
.input-box{
min-width: 380px;
display: flex;
font-size: 24px;
li{
// flex: 1;
width: 50px;
height: 50px;
// background:rgba(255,255,255,0);
background-color:#fff;
// border-right:1px solid rgba(206,208,210,1);
border:1px solid #ccc;
box-sizing: border-box;
margin-left: -1px;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #777;
}
}
.class-close-box{
width: 2rem;
height: 1.5rem;
position: absolute;
right: 0.5rem;
top: -1.3rem;
}
.class-close-box-div{
width: 1rem;
height: 1rem;
font-size: 0.8rem;
line-height: 1rem;
margin: auto;
text-align: center;
border: 1px solid #666;
border-radius: 50%;
}
.class-close-box-li{
width: 1px;
height: 0.5rem;
background: #666;
margin: auto;
}
.overflow-y{
overflow-y: inherit;
}
.class-van-button-small{
min-width: 0;
border-radius: 5px;
margin: 5px 2px;
box-shadow: 5px 5px 5px #aaa;
}
.class-plate-box{
width: 100%;
padding: 0.7rem 0.5rem;
box-sizing: border-box;
background: #eaf1f9;
position: relative;
}
.plate_number{
.plate_chinese_box{
width: 750px;
height: 420px;
padding: 26px;
display: flex;
justify-content: space-between;
align-content: flex-end;
flex-wrap: wrap;
.close-box{
width: 680px;
color: #409EFF;
display: flex;
justify-content:space-between;
position: absolute;
left:0;
right: 0;
margin:auto;
top: 20px;
}
.van-button--small{
width: 11.3%;
}
.van-button--small:last-child{
width: 24%;
}
}
}
.allBoard{
.plate_number_box{
width: 750px;
height: 400px;
padding: 26px;
display: flex;
align-content: flex-end;
flex-wrap: wrap;
position: relative;
.close-box{
width: 680px;
color: #409EFF;
display: flex;
justify-content:space-between;
position: absolute;
left:0;
right: 0;
margin:auto;
top: 20px;
}
.van-button--small{
width: 8.8%;
margin-right:8px;
margin-bottom: 10px;
}
.van-button--small:last-child{
width: 19%;
}
}
}
.displayNone{
display: none!important;
}
</style>
4056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
