微信小程序车牌键盘

肥猫無烦恼

已于 2022-04-19 02:00:54 修改

阅读量1.3k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序

于 2022-04-19 01:42:48 首次发布

原文链接：https://blog.csdn.net/zhao97/article/details/113942682

版权

微信小程序专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近一个项目用到输入车牌号的功能，给网上看了不少，然后自己优化了一下。
在这里插入图片描述
1.在components目录下新建carKeyboard组件
carKeyboard.wxml

<!-- 输入框 -->
<view class="modal-content" wx:if="{{keyType == 'onlyipt' || keyType == 'iptboard'}}">
    <view class="board-input">
        <block wx:for="{{8}}" wx:key="index">
            <view data-index="{{index}}"  class="input {{selectInputIndex===index?'activeInput':''}}"  bindtap='inputCarNum'>
                <text>{{carNumArr[index] || ''}}</text>
            </view>
        </block>
        <view class="line"></view>
    </view>
</view>

<!-- 车牌 -->
<view class='keyboard' wx:if="{{keyType == 'keyborad' || keyType == 'iptboard'}}">
  <!-- 省键盘 -->
  <view class="provinces" hidden='{{hiddenPro}}'>
    <view class="pro-li fl" wx:for="{{provinceArr}}" wx:key="index" catchtap='proTap' data-province="{{item}}">{{item}}</view>
  </view>
  <!-- 号码键盘	 -->
  <view class="keyNums" hidden='{{hiddenStr}}'>
    <view  wx:if="{{selectInputIndex===1}}" class="row numRow">
      <view  class="pro-li  disabled"  wx:for="{{numArr}}"  wx:key="index" data-str="{{item}}">{{item}}</view>
    </view>
    <view wx:else class="row numRow">
        <view  class="pro-li " wx:for="{{numArr}}"  wx:key="index" catchtap='strTap' data-str="{{item}}">{{item}}</view>
    </view>
    <view class="strOne row">
      <view  class="pro-li " wx:for="{{strArrOne}}" wx:key="index" catchtap='strTap' data-str="{{item}}">{{item}}</view>
    </view>
    <view class="strTwo row">
      <view  class="pro-li " wx:for="{{strArrTwo}}"wx:key="index" catchtap='strTap' data-str="{{item}}">{{item}}</view>
    </view>
    <view class="strThree row">
      <view class="pro-li " wx:for="{{strArrThree}}" wx:key="index" catchtap='strTap' data-str="{{item}}">{{item}}</view>
      <view class='kb-icon pro-li' catchtap='backSpace'>
        <image class='delete-icon' src="./delete.png" />
      </view>
    </view>
  </view>
</view>

carKeyboard.js

const INPUT_NUM = 8;//车牌号输入框个数
const EmptyArray = new Array(INPUT_NUM).fill('');//['','','','','','','','']

// 车牌输入框的下标
const INPUT_INDEX = {
  FIRST: 0,
  SECOND: 1
};

Component({
  properties: {
    keyType: {
      type: String,
      value: 'onlyipt', //onlyipt-输入框，  keyborad-键盘， iptboard-输入框加键盘
    }
  },
  data: {
    // 键
   	provinceArr: ['京', '沪', '津', '冀', '粤', '晋', '蒙', '辽', '吉', '黑', '苏', '浙', '皖', '闽', '赣', ' 鲁', '豫', '鄂', '湘', '桂', '琼', '渝', '川', '贵', '云', '藏', '陕', '甘', '青', '宁', '新'],
    numArr: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
    strArrOne: ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'P','港','澳'],
    strArrTwo: ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L','学'],
    strArrThree: ['Z', 'X', 'C', 'V', 'B', 'N', 'M','警'],
    hiddenPro: false, // 隐藏省份键盘
    hiddenStr: true, // 隐藏数字字母键盘
    carNumArr: EmptyArray,
    selectInputIndex: 0,
  },
  methods: {
    proTap(e) { //点击省份
      let province = e.currentTarget.dataset.province;
      const { carNumArr, selectInputIndex } = this.data;
      this.setData({
        hiddenPro: true,
        hiddenStr: false
      });
      carNumArr[selectInputIndex] = province;
      // 选择车牌号时触发
      this.setData({
        carNumArr,
        // 选中一个后，下一个输入框聚焦
        selectInputIndex: selectInputIndex !== carNumArr.length - 1 ? selectInputIndex + 1 : selectInputIndex,
      });
    },
    strTap(e) { //点击字母数字
      const str = e.currentTarget.dataset.str;
      const { carNumArr, selectInputIndex } = this.data;
      carNumArr[selectInputIndex] = str;
      this.setData({
        carNumArr,
        // 选中一个后，下一个输入框聚焦
        selectInputIndex: selectInputIndex !== carNumArr.length - 1 ? selectInputIndex + 1 : selectInputIndex,
      });
    },
    inputCarNum(e) {
      const { index } = e.currentTarget.dataset;
      this.setData({
        showCarKeyboard: true,
        selectInputIndex: index
      });
      if (index === INPUT_INDEX.FIRST) {
        // 第一个输入框展示省份键盘，第二个展示字母数字输入框(数字不可点),以后就是数字字母输入框(都可点)
        this.setData({
          hiddenPro: false,
          hiddenStr: true
        });
      } else if (index === INPUT_INDEX.SECOND) {
        this.setData({
          hiddenPro: true,
          hiddenStr: false
        });
      } else {
        this.setData({
          hiddenPro: true,
          hiddenStr: false
        });
      }
    },
    backSpace() { //删除
      const { carNumArr, selectInputIndex } = this.data;
      carNumArr[selectInputIndex] = '';
      this.setData({
        carNumArr,
        selectInputIndex: selectInputIndex !== INPUT_INDEX.FIRST ? selectInputIndex - 1 : selectInputIndex,
      }, () => {
        if (this.data.selectInputIndex === INPUT_INDEX.FIRST) { //这里必须要用this.data.selectInputIndex，用最新的
          this.setData({
            hiddenPro: false,
            hiddenStr: true
          });
        }
      });
    },
    onOk() {
      const carNum = this.data.carNumArr.join('');
      this.setData({
        selectInputIndex: -1
      })
      this.triggerEvent('onOk', carNum);
    }
  },
  //监听
  observers: {
    keyType: function(value) {
      console.log(value)
      if(value == 'onlyipt') {
        this.onOk()
      }
    }
  }
});

carKeyboard.wxss

/* 键盘 */
.keyboard {
	width: 100%;
	position: fixed;
	bottom: 0;
	left:0;
	z-index: 1000;
	background-color: rgba(210, 213, 219, 90);
}

.fl {
	float: left
}

.carnum {
	text-align: center;
	height: 88rpx
}

.tel {
	border-bottom: 2rpx solid #ddd;
	height: 100rpx;
	line-height: 100rpx;
}

.provinces {
	overflow: hidden;
	padding-top: 20rpx;
}

.pro-li {
	font-size: 32rpx;
	color: #353535;
	height: 76rpx;
	width: 62rpx;
	line-height: 76rpx;
	text-align: center;
	margin-left: 12rpx;
	margin-bottom: 20rpx;
	background-color: #fff;
	box-shadow: 0px 1rpx 2rpx 0 #9A9A9A;
	border-radius: 5px;
	flex: 1
}

.keyNums .disabled {
	background-color: #F7F7F7;
	color: #CCC
}

.keyNums {
	overflow: hidden;
	padding-top: 20rpx;
	display: flex;
	flex-direction: column;
}

.keyNums .row {
	display: flex;
}

.keyNums .numRow {
	padding: 0 10rpx;
}

.keyNums .strOne {
	padding: 0 10rpx;
}

.keyNums .strOne .strOneItem {
	flex: 1
}

.keyNums .strTwo {
	padding: 0 40rpx;
}

.keyNums .strOne .strTwoItem {
	flex: 1
}

.keyNums .strThree {
	padding-left: 116rpx;
	padding-right: 10rpx;
}

.keyNums .strOne .strThreeItem {
	flex: 1
}

.keyNums .strOne .strThreeItem:nth-child(7) {
	margin-left: 100px
}

.keyNums .pro-li:nth-child(16) {
	color: red
}

.keyNums .strThree .kb-del {
	margin-left: 12rpx
}

.keyNums .strThree .kb-icon {
	flex: 1.5;
	background: #ABB3BD;
	margin-left: 40rpx;
}

/* ipt样式 */
.board-input {
	display: flex;
}

.board-input .input {
	border: 1px solid rgba(151, 151, 151, 0.3);
	margin-right: 6rpx;
	border-radius: 10rpx;
	flex: 1;
	text-align: center;
	height: 80rpx;
	line-height: 80rpx;
	padding: 0 8rpx;
	background: rgba(0, 0, 0, 0.04);
	color: #9A9A9A;
	font-family: PingFangSC-Medium, PingFang SC;
}

.board-input .input:nth-child(1) {
	border-right-width: 0;
	margin-right: 0;
	position: relative;
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
	z-index: 1;
}

.board-input .input:nth-child(1)::after {
	content: "";
	position: absolute;
	right: -1px;
	width: 1px;
	height: 60rpx;
	top: 10rpx;
	background-color: rgba(151, 151, 151, 0.3);
	/* z-index: -10; */
}
.board-input .input:nth-child(1).activeInput::after {
	display: none;
}


.board-input .input:nth-child(2) {
	position: relative;
	border-left-width: 0;
	margin-right:20rpx;
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
}

.board-input .input:nth-child(2)::after {
	content: "";
	position: absolute;
	right:-18rpx;
	top: 45%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: rgba(151, 151, 151, 0.4);
}

.board-input .input:nth-child(8) {
	border: 1px dashed #5dda62;
}

.board-input .activeInput {
	border-radius: 10rpx !important;
	border: 1px solid #FE785E !important;
	z-index: 10;
}

.board-input .text {
	text-align: right;
	color: #c5c5c5;
	font-size: 28rpx;
}

.delete-icon {
	width: 50rpx;
	height: 45rpx;
	margin-top: 18rpx;
}

carKeyboard.json

{
  "component": true
}

删除的图片记得下载加上
在这里插入图片描述
2.使用方法
在需要使用的wxml中引入

给当前页面的父级添加事件 bindtap="handleClick"，为了点击键盘以外的地方，键盘回收

<carKeyboard
    keyType="{{keyType}}"
    carNum="{{plateNumber}}"
    bind:onOk="onOk"
    catchtap="toShowBoard" 
/>

data: {
  plateNumber: '',
  keyType: 'onlyipt'
},

//显示车牌键盘
toShowBoard(){
  this.setData({
    keyType: 'iptboard'
  })
},

//确认车牌号
onOk(e){
  console.log(e.detail, '------输入的车牌号-----')
  this.setData({
    plateNumber: e.detail
  })
},

//点击输入车牌号以外的地方键盘消失
handleClick(e) {
  if(this.data.keyType == 'iptboard') {
    this.setData({
      keyType: 'onlyipt'
    })
  }
}

这就OK了。

肥猫無烦恼

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
4
评论
微信小程序车牌键盘

最近一个项目用到输入车牌号的功能，给网上看了不少，然后自己优化了一下。1.在components目录下新建carKeyboard组件carKeyboard.wxml<view class="modal-content" wx:if="{{keyType == 'onlyipt' || keyType == 'iptboard'}}"> <view class="board-input"> <block wx:
复制链接

扫一扫