vue h5 车牌键盘 输入插件
接下来带大家用一个键盘输入车牌号的的使用看下效果图首先在compoents里引入写好的插件<template><view class="keyboard-wrap" v-if="kbShow"><view class="head"><view class="done" @tap="done">完成 <text class="iconfont i
·
接下来带大家用一个键盘输入车牌号的的使用
看下效果图
首先在compoents里引入写好的插件
<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">
<view class="content">
<text class="iconfont iconshanchu1"></text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
keyboardList: [], //键盘类型
currentIndex: 0 //键盘区当前下标
}
},
props: ['kbIndex', 'kbType', 'kbShow'],
mounted() {
this.keyboardList = [
[
['京', '粤', '津', '晋', '冀', '蒙', '辽', '吉', '黑', '渝'],
['苏', '浙', '皖', '闽', '赣', '鲁', '鄂', '沪', '宁'],
['桂', '琼', '川', '贵', '云', '藏', '陕', '新'],
[ '豫', '湘', '青', '甘'],
],
[
['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', 'I,f', 'O,f', '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', 'I,f', 'O,f', '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', 'I,f', 'O,f', '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', 'I,f', 'O,f', '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', 'I,f', 'O,f', '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', 'I,f', 'O,f', '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', 'I,f', 'O,f', 'P'],
['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ''],
['Z', 'X', 'C', 'V', 'B', 'N', 'M', '', '', ''],
]
]
},
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字符不执行
if(res.split(',')[1] == 'f' || res == ''){
return;
}
this.$emit('childValue', res);
if(this.currentIndex == this.keyboardList.length - 1){
return
}
this.currentIndex ++;
this.$emit('childIndex', this.currentIndex);
}
}
}
</script>
<style lang="less" scoped>
@color: #007AFF;
.keyboard-wrap {
position: fixed;
bottom: 0;
right: 0;
left: 0;
width: 100%;
z-index: 999;
box-shadow: 0 0 30upx rgba(0, 0, 0, .1);
box-sizing: border-box;
.head{
overflow: hidden;
background-color: #ffffff;
border-top: 1upx #e6e5ef solid;
.done{
float: right;
width: 150upx;
height: 90upx;
line-height: 90upx;
text-align: center;
color: @color;
font-size: 34upx;
.iconfont{
margin-left: 6upx;
font-size: 30upx;
}
}
}
.key-list{
padding: 4px 0;
background: #e3e9ec;
}
.uni-flex{
justify-content: center;
}
/*iphone键盘*/
.item {
width: 10%;
height: 90upx;
margin: 6upx 0;
text-align: center;
box-sizing: content-box;
.content{
line-height: 90upx;
background: #fff;
font-size: 50upx;
border-radius: 8upx;
margin: 0 6upx;
box-shadow: 0 2upx 2upx rgba(0, 0, 0, .1);
}
&.disable .content{
background-color: #d6dde0;
color: #acb5b9;
}
&.item:not(.disable):active .content {
background-color: @color;
color: #fff;
}
}
.colspan {
display: none;
&.active {
display: block;
}
}
.del-item{
position: absolute;
right: 4upx;
bottom: 6upx;
width: 20%;
height: 90upx;
.iconfont{
line-height: 1;
font-size: 50upx;
}
}
}
</style>
在自己的页面直接引入
import keyboard from '@/components/keyboard/keyboard'
components: {
keyboard
},
在页面加载
<!-- 键盘 -->
<keyboard :kbShow="keyBoard.isShow" :kbIndex="keyBoard.indexNum" :kbType="keyBoard.length" @childValue="keyboardValue"
@childClose="keyboardClose" @childIndex="keyboardIndex" @childDel="keyboardDel"></keyboard>
在data里插入数据
keyBoard: { //键盘
isShow: false,
kbLenght: 8, //车牌输入框长度
indexNum: ' ', //点击车牌设置焦点的下标
value: [], //键盘值
},
在methods 写入方法
methods: {
//点击车牌输入框
carPlateInput(res) {
this.keyBoard.isShow = true; //显示键盘
this.keyBoard.indexNum = res; //设置键盘焦点下标
},
//键盘点击返回的值
keyboardValue(res) {
this.$setObject(this.keyBoard.value, this.keyBoard.indexNum, res)
},
//删除键盘值
keyboardDel(res) {
this.$setObject(this.keyBoard.value, res, '')
},
//关闭
keyboardClose(res) {
this.keyBoard.isShow = res;
this.keyBoard.indexNum = ""; //关闭键盘键盘高亮取消
},
//车牌焦点下标
keyboardIndex(res) {
this.keyBoard.indexNum = res;
},
在页面写入那个输入框
<view class="input-plate-wrap">
<template v-for="(item, index) in keyBoard.kbLenght">
<view class="plate-item" v-if="index != keyBoard.kbLenght - 1" :class="{'active': index === keyBoard.indexNum}"
@tap="carPlateInput(index)">
{{keyBoard.value[index] || ''}}
</view>
<!-- 新能源多一位车牌 -->
<view class="plate-item" v-if="index == keyBoard.kbLenght - 1" :class="{'active': index === keyBoard.indexNum}"
@tap="carPlateInput(index)">
<!-- 如果没有车牌号显示新能源标 -->
<template v-if="!$isNull(keyBoard.value[index])">
{{keyBoard.value[index]}}
</template>
<template v-if="$isNull(keyBoard.value[index])">
<text class="iconfont icondiandongche"></text>
</template>
</view>
</template>
</view>
css
.input-plate-wrap {
display: flex;
margin-top: 30upx;
.plate-item {
position: relative;
display: flex;
flex: 1;
margin: 0 6upx;
height: 90upx;
font-size: @fontSize + 6upx;
border: 3upx solid #c3c2cb;
align-items: center;
justify-content: center;
border-radius: @borderRadius;
background-color: #ffffff;
&.active {
border: 3upx solid @color-green;
}
&:nth-child(2) {
margin-right: 30upx;
&:after {
display: block;
position: absolute;
content: '';
height: 10upx;
width: 10upx;
right: -26upx;
border-radius: 12upx;
background-color: #c3c2cb;
}
}
}
.point {
display: flex;
width: 14upx;
height: 14upx;
border-radius: 14upx;
margin-top: 40upx;
background-color: #c3c2cb;
}
.icondiandongche {
color: @color-green;
font-size: @fontSize + 20upx;
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)