<template>
|
<div class="panel-wrap" v-if="isShow" data-value="exit" @click="colse_da">
|
<div class="mask_layer" v-if="isShowMask"></div>
|
<div class="vehicle-panel" :style="{background:backgroundColor}" @click.stop>
|
<div class="topItem">
|
<div class="check" @click.stop="check">中/英切换</div>
|
<div class="contentShow" v-if="finalValue">最终值：{{finalValue}}</div>
|
<div class="exit" :style="{color:cancelColor}" @click.stop="vehicleTap('cancel')">取消</div>
|
</div>
|
<!--省份简写键盘-->
|
<div v-if="keyBoardType === 1">
|
<div class="vehicle-panel-row_province">
|
<div
|
class="vehicle-panel-row-button"
|
:style="{border:buttonBorder}"
|
v-for="(item,idx) in keyVehicle1"
|
@click.stop="vehicleTap(item)"
|
:key="idx+item"
|
>{{item}}</div>
|
</div>
|
<div class="vehicle-panel-row_province">
|
<div
|
class="vehicle-panel-row-button"
|
:style="{border:buttonBorder}"
|
v-for="(item,idx) in keyVehicle2"
|
@click.stop="vehicleTap(item)"
|
:key="idx+item"
|
>{{item}}</div>
|
</div>
|
<div class="vehicle-panel-row_province">
|
<div
|
class="vehicle-panel-row-button"
|
:style="{border:buttonBorder}"
|
v-for="(item,idx) in keyVehicle3"
|
@click.stop="vehicleTap(item)"
|
:key="idx+item"
|
>{{item}}</div>
|
</div>
|
|
<div class="vehicle-panel-row_province">
|
<div
|
class="vehicle-panel-row-button vehicle-panel-row-button-last"
|
@click.stop="vehicleTap(item)"
|
v-for="(item,idx) in keyVehicle4"
|
:style="{border:buttonBorder}"
|
:key="idx+item"
|
>{{item}}</div>
|
<div
|
:style="{border:buttonBorder}"
|
class="vehicle-panel-row-button vehicle-panel-row-button-img"
|
>
|
<span class="delete-btn" @click.stop="vehicleTap('delete')">删除</span>
|
<!-- <van-icon
|
class="vehicle-en-button-delete"
|
name="close"
|
@click.stop="vehicleTap('delete')"
|
/>-->
|
</div>
|
</div>
|
</div>
|
<!--英文键盘 -->
|
<div v-else>
|
<div class="vehicle-panel-row">
|
<div
|
class="vehicle-panel-row-button vehicle-panel-row-button-number"
|
@click.stop="vehicleTap(item)"
|
v-for="(item,idx) in keyNumber"
|
:style="{border:buttonBorder}"
|
:key="item+idx"
|
>{{item}}</div>
|
</div>
|
<div class="vehicle-panel-row">
|
<div
|
class="vehicle-panel-row-button"
|
:style="{border:buttonBorder}"
|
v-for="(item,idx) in keyEnInput1"
|
@click.stop="vehicleTap(item)"
|
:key="idx+item"
|
>{{item}}</div>
|
</div>
|
<div class="vehicle-panel-row">
|
<div
|
class="vehicle-panel-row-button"
|
:style="{border:buttonBorder}"
|
v-for="(item,idx) in keyEnInput2"
|
@click.stop="vehicleTap(item)"
|
:key="idx+item"
|
>{{item}}</div>
|
<div
|
:style="{border:buttonBorder}"
|
class="vehicle-panel-row-button vehicle-panel-row-button-img"
|
>
|
<span class="delete-btn" @click.stop="vehicleTap('delete')">删除</span>
|
<!-- <van-icon
|
class="vehicle-en-button-delete"
|
name="close"
|
@click.stop="vehicleTap('delete')"
|
/>-->
|
</div>
|
</div>
|
<div class="vehicle-panel-row-last">
|
<div
|
class="vehicle-panel-row-button vehicle-panel-row-button-last"
|
@click.stop="vehicleTap(item)"
|
:style="{border:buttonBorder}"
|
v-for="(item,idx) in keyEnInput3"
|
:key="idx+item"
|
>{{item}}</div>
|
<div
|
:style="{border:buttonBorder,backgroundColor:confirmColor}"
|
class="vehicle-panel-row-button vehicle-panel-ok"
|
@click.stop="vehicleTap('ok')"
|
>确定</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "TKeyword",
|
props: {
|
// 是否弹起键盘
|
isShow: {
|
type: Boolean,
|
default: false
|
},
|
// 取消字体颜色
|
cancelColor: {
|
type: String,
|
default: `#2072ED`
|
},
|
// 是否显示遮罩
|
isShowMask: {
|
type: Boolean,
|
default: true
|
},
|
// 是否点击遮罩关闭键盘
|
isClickMask: {
|
type: Boolean,
|
default: true
|
},
|
// 最大输入长度
|
maxLength: {
|
type: Number,
|
default: 8
|
},
|
// 确认背景颜色
|
confirmColor: {
|
type: String,
|
default: `#2072ED`
|
},
|
// 最终显示的值
|
finalValue: {
|
type: String
|
}
|
},
|
data() {
|
return {
|
keyVehicle1: ['京', '津', '晋', '冀', '蒙', '辽', '吉', '黑', '沪'],
|
keyVehicle2: ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
|
keyVehicle3: ['粤', '桂', '琼', '渝', '川', '贵', '云', '藏'],
|
keyVehicle4: ['陕', '甘', '青', '宁', '新', 'W'],
|
keyNumber: '1234567890',
|
keyEnInput1: 'QWERTYUP', // 没有IO
|
keyEnInput2: 'ASDFGHJKL',
|
keyEnInput3: 'ZXCVBNM',
|
backgroundColor: '#fff',
|
keyBoardType: 1,
|
buttonBorder: '1px solid #ccc'
|
}
|
},
|
methods: {
|
vehicleTap(event) {
|
console.log(event)
|
if (/^[\u4e00-\u9fa5]/.test(event)) {
|
this.keyBoardType = 2
|
}
|
switch (event) {
|
case 'delete':
|
this.$emit('delete')
|
this.$emit('inputchange', event, this.maxLength)
|
break
|
case 'ok':
|
this.$emit('ok')
|
break
|
case 'cancel':
|
this.$emit('cancel')
|
break
|
default:
|
this.$emit('inputchange', event, this.maxLength)
|
}
|
},
|
// 点击遮罩关闭键盘mask-layer
|
colse_da() {
|
if (!this.isClickMask) {
|
return
|
}
|
this.$emit('cancel')
|
},
|
check() {
|
if (this.keyBoardType === 1) {
|
this.keyBoardType = 2
|
} else if (this.keyBoardType === 2) {
|
this.keyBoardType = 1
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
:host {
|
width: 100%;
|
}
|
|
.panel-wrap {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
z-index: 9999;
|
.mask_layer {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: rgba(0, 0, 0, 0.5);
|
}
|
.vehicle-panel {
|
width: 100%;
|
position: fixed;
|
bottom: 0;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
z-index: 1000;
|
background: #fff;
|
padding-bottom: 10px;
|
}
|
.vehicle-panel-row_province {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.vehicle-panel-row {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.vehicle-panel-row-last {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.vehicle-panel-row-button {
|
background-color: #fff;
|
margin: 0 1vw;
|
margin-top: 8px;
|
width: 8.8vw;
|
height: 40px;
|
border-radius: 5px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.delete-btn{
|
color: #fff;
|
}
|
.vehicle-panel-row-button-number {
|
background-color: #eee;
|
}
|
.vehicle-panel-row-button-last {
|
width: 8.8vw;
|
height: 40px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.vehicle-hover {
|
background-color: #ccc;
|
}
|
.vehicle-panel-row-button-img {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background: #dd6161;
|
border: 1px solid #dd6161;
|
}
|
.vehicle-en-button-delete {
|
width: 8.8vw;
|
height: 40px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.vehicle-panel-ok {
|
background-color: #355db4;
|
color: #fff;
|
width: 50px;
|
height: 40px;
|
font-size: 16px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.topItem {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 40px;
|
font-size: 16px;
|
border: 1px solid #ebedf0;
|
.check {
|
margin-left: 10px;
|
color: #355db4;
|
flex: 0.5;
|
}
|
.exit {
|
margin-left: 0;
|
margin-right: 10px;
|
flex: 0.5;
|
text-align: right;
|
}
|
.contentShow {
|
text-align: center;
|
flex: 1;
|
}
|
}
|
}
|
</style>
|
