注：在(一)中，有完整的子组件代码。
车牌号：第二位一定是大写字母，所以我设置了在没选择第一位是数字键不可用。
图片.png
图片.png
图片.png
挂车号：比车牌号少了一位，多了一个“挂”字。
图片.png
- 子组件：
<template>
<div class="carno">
<div class="carno-keyboard">
<div class="plate_chinese_box" v-if="show_chinese">
<mt-button
v-for="(item, index) in Chinese_List"
: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 Number_List"
:key="item.id"
@click="checkEnglish_num(index, 'num')"
:disabled = show_isNumber
>{{item.name}}</mt-button>
<mt-button
v-for="(item, index) in English_List"
:key="item.id"
@click="checkEnglish_num(index, 'letter')"
>{{item.name}}</mt-button>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
show_chinese: true, // 是否显示汉字键盘
show_allBoard: false, // 是否显示英文数字键盘
show_isNumber: true, // 是否启用数字键
Chinese_List: [
{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}
],
Number_List: [
{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}
],
English_List: [
{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: 99}
],
first: '',
numArr: []
}
},
props: {
typeStr: ''
},
// 监测车牌号信息的变化，发布事件让父组件订阅
watch: {
first () {
this.$emit('carno-change', this.first, this.numArr)
},
numArr () {
this.$emit('carno-change', this.first, this.numArr)
if (this.numArr.length < 1) {
this.show_isNumber = true
} else {
this.show_isNumber = false
}
},
typeStr () {
this.first = ''
this.numArr = []
this.show_chinese = true
this.show_allBoard = false
}
},
methods: {
// 选择车牌号前面的汉字
checkChinese (index) {
// 如果点击删除键，删除第一个格的内容
if (this.Chinese_List[index].id === 99) {
this.first = ''
} else {
// 把选中的字赋值给第一个格，并且切换键盘
this.first = this.Chinese_List[index].name
this.show_chinese = false
this.show_allBoard = true
}
},
// 选择车牌号后面的数字和字母
checkEnglish_num (index, type) {
// 如果点击删除键，删除 numArr 的最后一个值
if (this.English_List[index].id === 99) {
this.numArr.pop()
// 如果 numArr 里面被删的没有值了，切换键盘
if (this.numArr.length === 0) {
this.show_chinese = true
this.show_allBoard = false
}
} else {
// 把选中的值 push 到 numArr 内
if (type === 'letter') {
this.numArr.push(this.English_List[index].name)
}
if (type === 'num') {
this.numArr.push(this.Number_List[index].name)
}
// 如果 numArr 中的值超过 6 个（车牌号的最大位数），删除最后一个
if ((this.typeStr === 'carNo') && (this.numArr.length > 6)) {
this.numArr.pop()
}
if ((this.typeStr === 'trailerNo') && (this.numArr.length > 5)) {
this.numArr.pop()
}
}
}
}
}
</script>
- 父组件引用车牌号选择的虚拟键盘
<template>
<div class="write">
<div class="row">
<label class="row-label" @click="clickShowKeyboard('carNo')">
<span>车牌号</span>
<input type="text" placeholder="请输入车牌号" v-model="carNo" disabled="true"/>
</label>
</div>
<div class="row" v-if="trailerBlock">
<label class="row-label" @click="clickShowKeyboard('trailerNo')">
<span>挂车号</span>
<input type="text" placeholder="请输入挂车号" v-model="trailerNo" disabled="true"/>
</label>
</div>
<mt-popup style="width:100vw;" v-model="popupVisibleCarNo" position="bottom">
<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>{{carNoFirst}}</li>
<li>{{carNmuArr[0]}}</li>
<li>{{carNmuArr[1]}}</li>
<li>{{carNmuArr[2]}}</li>
<li>{{carNmuArr[3]}}</li>
<li>{{carNmuArr[4]}}</li>
<li>{{carNmuArr[5]}}</li>
</div>
</div>
<CarNoKeyboard @carno-change="carNoChange" :typeStr="typeStr"></CarNoKeyboard>
</div>
</mt-popup>
<mt-popup style="width:100vw;" v-model="popupVisibleTrailerNo" position="bottom">
<div class="carno">
<div class="carno-header">
<span class="canael" @click="popupVisibleTrailerNo = false">取消</span>
<span class="title">请选择挂车号</span>
<span class="confirm" @click="confirmTrailerNo">确认</span>
</div>
<div class="carno-input">
<div class="input-box">
<li>{{trailerNoFirst}}</li>
<li>{{trailerNmuArr[0]}}</li>
<li>{{trailerNmuArr[1]}}</li>
<li>{{trailerNmuArr[2]}}</li>
<li>{{trailerNmuArr[3]}}</li>
<li>{{trailerNmuArr[4]}}</li>
<li>挂</li>
</div>
</div>
<CarNoKeyboard @carno-change="trailerNoChange" :typeStr="typeStr"></CarNoKeyboard>
</div>
</mt-popup>
</div>
</template>
<script>
import CarNoKeyboardfrom '@/components/CarNoKeyboard'
export default {
components: {
CarNoKeyboard
},
data () {
return {
// 激活键盘时要传过去的参数,用于判断当前是选择车牌号还是挂车号
typeStr: '',
// 车牌号码选择
popupVisibleCarNo: false,
carNoFirst: '',
carNmuArr: [],
// 挂车号选择
popupVisibleTrailerNo: false,
trailerNoFirst: '',
trailerNmuArr: [],
carNo: '',
trailerNo: '',
}，
methods: {
// 激活的键盘判断
clickShowKeyboard (type) {
this.typeStr = type
if (type === 'carNo') this.popupVisibleCarNo = true
if (type === 'trailerNo') this.popupVisibleTrailerNo = true
},
/**
* mint-ui Picker组件和 Popup组件 的使用
* 车牌号码选择
*/
carNoChange (first, numArr) {
this.carNoFirst = first
this.carNmuArr = numArr
},
confirmCarNo () {
if (this.carNoFirst !== '' && this.carNmuArr.length === 6) {
this.popupVisibleCarNo = false
let numStr = this.carNmuArr.join('')
this.insurInformation.carNo = this.carNoFirst + numStr
} else {
this.$toast({message: '请输入完整', className: 'addClassToast', position: 'top'})
}
},
/**
* 挂车号选择
*/
trailerNoChange (first, numArr) {
this.trailerNoFirst = first
this.trailerNmuArr = numArr
},
confirmTrailerNo () {
if (this.trailerNoFirst !== '' && this.trailerNmuArr.length === 5) {
this.popupVisibleTrailerNo = false
let trailerStr = this.trailerNmuArr.join('')
this.insurInformation.trailerNo = this.trailerNoFirst + trailerStr + '挂'
} else {
this.$toast({message: '请输入完整', className: 'addClassToast', position: 'top'})
}
},
}
