<template>
<view class="keyboard-wrap" v-if="kbShow">
<view class="head">
<view class="done" @tap="done">
<text class="iconfont iconxiala-"></text>关闭
</view>
</view>
<view class="key-list">
<view class="colspan" :class="{'active' : index === currentIndex }" v-for="(item, index) in keyboardList"
:key="index">
<view class="uni-flex" v-for="(secondItem, secondIndex) in item" :key="secondIndex">
<view class="item" :class="{'disable': thridItem.split(',')[1] == 'f'}"
v-for="(thridItem, thridIndex) in secondItem" :key="thridIndex"
@tap.stop="touchstartActive(thridItem)">
<view class="content">
{{thridItem.split(',')[0]}}
</view>
</view>
</view>
</view>
<!-- 删除键 -->
<view class="item del-item" @tap.stop="del" :style="{right:(currentIndex==0?'10.5vw':'1vw') }">
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
keyboardList: [], //键盘类型
currentIndex: 0 //键盘区当前下标
}
},
props: ['kbIndex', 'kbType', 'kbShow'],
mounted() {
this.keyboardList = [
[
['京', '津', '晋', '冀', '蒙', '辽', '吉', '黑', '沪'],
['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
['', '粤', '桂', '琼', '渝', '川', '贵', '云', '藏', ''],
['', '', '陕', '甘', '青', '宁', '新', 'W', '', ''],
],
[
['1,f', '2,f', '3,f', '4,f', '5,f', '6,f', '7,f', '8,f', '9,f', '0,f'],
['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '军,f'],
['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警,f'],
['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港,f', '澳,f', ''],
],
[
['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '军,f'],
['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警,f'],
['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港,f', '澳,f', ''],
],
[
['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '军,f'],
['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警,f'],
['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港,f', '澳,f', ''],
],
[
['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '军,f'],
['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警,f'],
['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港,f', '澳,f', ''],
],
[
['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '军,f'],
['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警,f'],
['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港,f', '澳,f', ''],
],
[
['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'P', '学', '军'],
['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警'],
['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港', '澳', ''],
],
[
['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '军,f'],
['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警,f'],
['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港,f', '澳,f', ''],
]
]
},
watch: {
//获取键盘区域下标
kbIndex: {
immediate: true,
handler(res) {
//转为数字类型，防止数据类型不能匹配
this.currentIndex = Number(res);
}
}
},
methods: {
done() {
this.kbShow = true;
this.$emit('childClose', '');
},
//删除
del() {
this.$emit('childDel', this.currentIndex);
if (this.currentIndex == 0) {
return;
}
this.currentIndex--;
this.$emit('childIndex', this.currentIndex);
},
//点击事件
touchstartActive(res) {
//键盘包含f字符不执行
console.log(this.currentIndex, 'emitqian');
if (res.split(',')[1] == 'f' || res == '') {
return;
}
this.$emit('childValue', res);
if (this.currentIndex == this.keyboardList.length - 1) {
this.$emit('hide')
}
this.currentIndex++;
this.$emit('childIndex', this.currentIndex);
console.log(this.currentIndex, 'emithou');
}
}
}
</script>
<style lang="less" scoped>
@color:
.keyboard-wrap {
position: fixed;
bottom: 0;
right: 0;
left: 0;
width: 100%;
z-index: 999;
box-shadow: 0 0 30rpx rgba(0, 0, 0, .1);
box-sizing: border-box;
.head {
overflow: hidden;
background-color:
border-top: 1rpx
.done {
float: right;
width: 150rpx;
height: 90rpx;
line-height: 90rpx;
text-align: center;
color: @color;
font-size: 3.2vw;
display: flex;
.iconfont {
margin-left: 6rpx;
font-size: 30rpx;
}
}
}
.key-list {
padding: 3.467vw 1.067vw 2.133vw;
margin: 0 auto;
text-align: center;
background:
}
.uni-flex {
display: flex;
margin-bottom: 1.867vw;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
justify-content: center;
}
/*iphone键盘*/
.item {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin-right: 1.067vw;
font-size: 0;
.content {
display: inline-block;
width: 100%;
line-height: 12vw;
font-size: 4vw;
color:
-webkit-box-shadow: 0 0.267vw 0.267vw
box-shadow: 0 0.267vw 0.267vw
background-color:
border-radius: 1.067vw;
z-index: 50;
}
&.disable .content {
color:
background-color:
}
&.item:not(.disable):active .content {
background-color: @color;
color:
}
}
.colspan {
display: none;
&.active {
display: block;
}
}
.del-item {
position: absolute;
right: 1vw;
bottom: 2.5vh;
width: 9vw;
height: 12vw;
background:
background-size: 5.467vw;
border-radius: 1.067vw;
// width: 20%;
// height: 90rpx;
.iconfont {
line-height: 1;
font-size: 50rpx;
}
}
}
.iconxiala- {
background-size: 2.267vw;
background-repeat: no-repeat;
display: block;
width: 5.867vw;
height: 3vh;
margin-top: 3.1vh;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIxRTM1MkM5N0IwQjExRUFBMjg4REY0ODVCRTE2OUUzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIxRTM1MkNBN0IwQjExRUFBMjg4REY0ODVCRTE2OUUzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjFFMzUyQzc3QjBCMTFFQUEyODhERjQ4NUJFMTY5RTMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjFFMzUyQzg3QjBCMTFFQUEyODhERjQ4NUJFMTY5RTMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6RjcO5AAAB+ElEQVR42ryWyytEURzHjWdKKRaExTSxYUEplFLyLK+EFDaShYUNC8VOMTvKCguPFSGPhaK88sjO5A/wWGBHNsgwje9Pv1PX8Zs7d+6NX32a7j1z72fOub/znesqmApG/VdF86cbLIBVUPhXslgQBw5ZSFUHmsGug/u6QDcoB/tgEQRJ5jGIqBLBhgMh/fh50MnHXSAezNIy3oAH7QIlrIlQRNetG0SqatUz84MG8ORQmAx2QL0wdmlskAtQ5UCYBo5AmTC2BbxGmRMhPe8TUCCMUWO08Or9kNkR5oJTkCOIJrkjA/o+syMsAscgU7jHCBigdpc2tSSsNBEO8/5J1cZpFn1g3CxBpPKZCMdAknbez3tqOlxcRSrU6xU0gWUr2WhF+BZi/Jmf8Y7VIA6Xc+28fFIlCEtqSxYDZsBQmIjaBNVOZBSeS6DXYiaGFYaS0bJsgzZh7BxUhOhSU6EkSwF73BR67XIzHJhsi5BCXZbBqVAsfHcFNIIXC/tQFBpl2eAM5AkiapIOFagWN/4voZLlc3K7BZGXIyhgI2l+CKP5b5yaIV37MoXoIOdg0GbSKGGJknmE5KZZ9ICJCF4JzIT9SnYNrgyD76CVX1oiLSV81M5/KtkHt/McWAOlPHW75eP73fPxLRj9zr0/fCOm18QscKdm9iXAAMhke9fXWcqOAAAAAElFTkSuQmCC);
border-radius: 1.067vw;
}
</style>
