237 lines
6.3 KiB
Vue
237 lines
6.3 KiB
Vue
<template lang="">
|
|
<div>
|
|
<div class='panel-wrap' v-if="isShow" data-value="exit" @tap='colse_da'>
|
|
<div class="vehicle-panel" :style="{background:backgroundColor,height:'472rpx'}">
|
|
<!-- height:'500rpx'; -->
|
|
<div class='topItem'>
|
|
<!-- <span class='check' @tap='check'>中/英</span>
|
|
<span class='contentShow'>{{oinp}}</span> -->
|
|
<span class='exit' @tap='vehicleTap("ok")'>完成</span>
|
|
</div>
|
|
<!--省份简写键盘-->
|
|
<div v-if="keyBoardType === 1">
|
|
<div class="vehicle-panel-row">
|
|
<div class='vehicle-panel-row-button' v-for="(item,idx) in keyVehicle1" @tap='vehicleTap(item)' :key="idx">{{item}}</div>
|
|
</div>
|
|
<div class="vehicle-panel-row">
|
|
<div class='vehicle-panel-row-button' v-for="(item,idx) in keyVehicle2" @tap='vehicleTap(item)' :key="idx">{{item}}</div>
|
|
</div>
|
|
<div class="vehicle-panel-row">
|
|
<div class='vehicle-panel-row-button' v-for="(item,idx) in keyVehicle3" @tap='vehicleTap(item)' :key="idx">
|
|
{{item}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="vehicle-panel-row-last">
|
|
<div class='vehicle-panel-row-button vehicle-panel-row-button-img' @tap="check">
|
|
ABC
|
|
</div>
|
|
<div class='vehicle-panel-row-button vehicle-panel-row-button-last' @tap='vehicleTap(item)' v-for="(item,idx) in keyVehicle4" :key="idx">
|
|
{{item}}
|
|
</div>
|
|
<div class='vehicle-panel-row-button vehicle-panel-row-button-img'>
|
|
<img src='https://eshangtech.com/wanmeiyizhanImg/keyboard-delete.svg' class='vehicle-en-button-delete' @tap='vehicleTap("delete")' mode='aspectFit'>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--英文键盘 -->
|
|
<div v-else>
|
|
<div class="vehicle-panel-row">
|
|
<div class='vehicle-panel-row-button ' @tap='vehicleTap(item)' v-for="(item,idx) in keyNumber"
|
|
:key="idx">{{item}}</div>
|
|
</div>
|
|
<div class="vehicle-panel-row">
|
|
<div class='vehicle-panel-row-button' v-for="(item,idx) in keyEnInput1" @tap='vehicleTap(item)' :key="idx" :class="{'vehicle-panel-row-button-number':item==='I'|| item==='O'}" >{{item}}</div>
|
|
</div>
|
|
<div class="vehicle-panel-row">
|
|
<div class='vehicle-panel-row-button' v-for="(item,idx) in keyEnInput2" @tap='vehicleTap(item)' :key="idx">{{item}}</div>
|
|
|
|
</div>
|
|
<div class="vehicle-panel-row-last">
|
|
<div class='vehicle-panel-row-button vehicle-panel-row-button-img' @tap="check">
|
|
省份
|
|
</div>
|
|
<div class='vehicle-panel-row-button vehicle-panel-row-button-last' @tap='vehicleTap(item)' v-for="(item,idx) in keyEnInput3"
|
|
:key="idx">
|
|
{{item}}
|
|
</div>
|
|
|
|
<div class='vehicle-panel-row-button vehicle-panel-row-button-img'>
|
|
<img src='https://eshangtech.com/wanmeiyizhanImg/keyboard-delete.svg' class='vehicle-en-button-delete' @tap='vehicleTap("delete")' mode='aspectFit'>
|
|
</div>
|
|
<!-- <div :style="{border:buttonBorder}" class='vehicle-panel-row-button vehicle-panel-ok' @tap='vehicleTap("ok")' >确定</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
isShow: false,
|
|
oinp: "",
|
|
keyBoardType: {
|
|
type: Number,
|
|
default: 1,
|
|
},
|
|
// keyBoardType: 1,
|
|
},
|
|
data() {
|
|
return {
|
|
keyVehicle1: ["陕", "京", "津", "沪", "冀", "豫", "云", "辽", "吉", "黑"],
|
|
keyVehicle2: ["湘", "皖", "鲁", "苏", "浙", "赣", "甘", "晋", "蒙", "闽"],
|
|
keyVehicle3: ["鄂", "桂", "粤", "川", "青", "藏", "琼", "宁", "贵", "渝"],
|
|
keyVehicle4: ["新", "使", "领", "警", "学", "港", "澳"],
|
|
keyNumber: "1234567890",
|
|
keyEnInput1: "QWERTYUIOP",
|
|
keyEnInput2: "ASDFGHJKL",
|
|
keyEnInput3: "ZXCVBNM",
|
|
backgroundColor: "#cfd5dc",
|
|
// keyBoardType: 1,
|
|
buttonBorder: "1px solid #ccc",
|
|
};
|
|
},
|
|
methods: {
|
|
vehicleTap: function (event) {
|
|
console.log("event", event);
|
|
switch (event) {
|
|
case "delete":
|
|
this.$emit("delete");
|
|
// this.$emit('inputchange', event)
|
|
break;
|
|
case "ok":
|
|
this.$emit("ok");
|
|
break;
|
|
case "exit":
|
|
this.$emit("exit");
|
|
break;
|
|
default:
|
|
if (event === "I" || event === "O") {
|
|
return;
|
|
}
|
|
this.$emit("inputchange", event);
|
|
}
|
|
},
|
|
colse_da() {
|
|
this.$emit("exit2");
|
|
},
|
|
check() {
|
|
if (this.keyBoardType === 1) {
|
|
this.keyBoardType = 2;
|
|
} else if (this.keyBoardType === 2) {
|
|
this.keyBoardType = 1;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
:host {
|
|
width: 100%;
|
|
}
|
|
.bgf7 {
|
|
background: #fefefe;
|
|
}
|
|
/* .panel-wrap {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 999;
|
|
} */
|
|
.vehicle-panel {
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
background: #fff;
|
|
padding-bottom: 28rpx;
|
|
}
|
|
.jik {
|
|
width: 0.6rem;
|
|
height: 0.8rem;
|
|
}
|
|
|
|
.vehicle-panel-row {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.vehicle-panel-row-last {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.vehicle-panel-row-button {
|
|
background-color: #fff;
|
|
margin: 7rpx 5rpx;
|
|
font-size: 32rpx;
|
|
width: 60rpx;
|
|
height: 80rpx;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
border-radius: 10rpx;
|
|
box-shadow: 0 2rpx 4rpx #7f7f7f;
|
|
}
|
|
.vehicle-panel-row-button-number {
|
|
background-color: #eee;
|
|
box-shadow: none;
|
|
}
|
|
/* .vehicle-panel-row-button-last {
|
|
width: 0.9rem;
|
|
height: 0.9rem;
|
|
line-height: 0.9rem;
|
|
} */
|
|
.vehicle-hover {
|
|
background-color: #ccc;
|
|
}
|
|
.vehicle-panel-row-button-img {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 96rpx;
|
|
background: #acb3bd;
|
|
font-size: 28rpx;
|
|
box-shadow: 0 2rpx 4rpx #acb3bd;
|
|
}
|
|
.vehicle-en-button-delete {
|
|
width: 52rpx;
|
|
height: 80rpx;
|
|
}
|
|
.vehicle-panel-ok {
|
|
background-color: #6a7cff;
|
|
color: #fff;
|
|
width: 1.5rem;
|
|
height: 0.8rem;
|
|
line-height: 0.8rem;
|
|
}
|
|
.topItem {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
height: 80rpx;
|
|
/* background: #f0f0f0; */
|
|
}
|
|
.exit {
|
|
margin-right: 30rpx;
|
|
color: #000;
|
|
font-size: 28rpx;
|
|
display: block;
|
|
line-height: 0.5rem;
|
|
}
|
|
.check {
|
|
margin-left: 0.3rem;
|
|
color: #6a7cff;
|
|
font-size: 0.28rem;
|
|
display: block;
|
|
line-height: 0.5rem;
|
|
}
|
|
</style> |