<template>
<div>
<div class="row">
<label class="row-label" @click="clickShowKeyboard">
<span>车牌号码</span>
<input type="text" placeholder="请选择车牌号码" v-model="carNo" disabled="true"/>
</label>
</div>
<div class="carno">
<div class="carno-header">
<span class="canael" @click="popupVisibleCarNo = false">取消</span>
<span class="title">请选择车牌号</span>
<span class="confirm" @click="confirmCarNo">确认</span>
</div>
<div class="carno-input">
<div class="input-box">
<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>{{numArr[6]}}</li>
</div>
</div>
<!-- 英文 数字 键盘 -->
<div class="carno-keyboard">
<div class="plate_chinese_box" v-if="show_chinese">
<mt-button
v-for="(item, index) in ChineseList"
:key="item.id"
@click="checkChinese(index)"
>{{item.name}}</mt-button>
</div>
<div class="plate_chinese_box plate_number_box" v-if="show_allBoard">
<mt-button
v-for="(item, index) in English_Number"
:key="item.id"
@click="checkEnglish_num(index)"
>{{item.name}}</mt-button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
carNo: '',
show_chinese: true, // 是否显示汉字键盘
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: 99}
],
English_Number: [
{name: '1', id: 28},
{name: '2', id: 29},
{name: '3', id: 30},
{name: '4', id: 31},
{name: '5', id: 32},
{name: '6', id: 33},
{name: '7', id: 34},
{name: '8', id: 35},
{name: '9', id: 36},
{name: '0', id: 37},
{name: 'Q', id: 38},
{name: 'W', id: 39},
{name: 'E', id: 40},
{name: 'R', id: 41},
{name: 'T', id: 42},
{name: 'Y', id: 43},
{name: 'U', id: 44},
{name: 'I', id: 45},
{name: 'O', id: 46},
{name: 'P', id: 47},
{name: 'A', id: 48},
{name: 'S', id: 49},
{name: 'D', id: 50},
{name: 'F', id: 51},
{name: 'G', id: 52},
{name: 'H', id: 53},
{name: 'J', id: 54},
{name: 'K', id: 55},
{name: 'L', id: 56},
{name: 'Z', id: 57},
{name: 'X', id: 58},
{name: 'C', id: 59},
{name: 'V', id: 60},
{name: 'B', id: 61},
{name: 'N', id: 62},
{name: 'M', id: 63},
{name: '挂', id: 64},
{name: '.', id: 99}
],
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.numArr.length > 7) {
this.numArr.pop()
}
}
},
confirmCarNo () {
if (this.first && this.numArr.length === 7) {
let numStr = this.numArr.join('')
this.carNo = this.first + numStr
} else {
this.$toast({message: '请输入正确车牌号', className: 'addClassToast', position: 'top'})
}
}
}
}
</script>
<style lang="scss" scoped>
.carno{
height: auto;
background-color: #ffffff;
&-header{
width: 100%;
height: auto;
padding: 2vw 0;
font-size: 4.26vw;
color: #666666;
display: flex;
justify-content: space-around;
align-items: center;
.canael{
color: #000000;
}
.confirm{
color: #f08800;
}
}
&-input{
height: 14vw;
display: flex;
justify-content: center;
align-items: center;
.input-box{
width: 80vw;
height: 10vw;
border-radius:.4rem;
border:1px solid rgba(206,208,210,1);
display: flex;
justify-content: center;
li{
flex: 1;
border-right: 1px solid rgba(206,208,210,1);
box-sizing: border-box;
margin-left: -1px;
font-size: 5.33vw;
display: flex;
align-items: center;
justify-content: center;
color: #323233;
}
li:last-child{
border: none;
}
}
}
&-keyboard{
width: 100%;
height: auto;
.plate_chinese_box{
background-color: #eaf1f9;
padding: 0 2vw;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
button{
width: 14%;
height: 9vw;
font-size: 4.6vw;
color: #333333;
margin: 1vw;
background-color: #ffffff;
box-shadow: 2px 2px 2px 2px #888888;
}
button:last-child{
color: #ffffff;
background: #ffffff url(../../../../static/images/home/WriteOrder-c.png) no-repeat center;
background-size: 60% 72%;
}
}
.plate_number_box{
background-color: #eaf1f9;
// padding: 0 2vw;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
button{
width: 9%;
height: 9vw;
display: flex;
justify-content: center;
align-items: center;
margin: 1vw 0.4vw;
box-shadow: 1px 1px 1px 1px #888888;
}
button:nth-child(21){
margin-left: 4.5%;
}
button:nth-child(29){
margin-right: 4.5%;
}
button:nth-child(30){
margin-left: 10%;
}
button:nth-child(36){
margin-right: 15%;
}
}
}
}
</style>
参考：
https://www.jianshu.com/p/ee0dbbded552
网友评论