经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序车牌键盘输入组件（支持单个删除更改，支持赋值，支持新能源）
来源：cnblogs　　作者：Sir奔　　时间：2024/7/12 15:13:38　　对本文有异议

网上一搜一大堆类似但大多都相对简单，适用的场景并不多。多数也不支持赋值 不支持单个删除更改
我就借鉴了以下文章的思路，为了达到自己想要的效果做了相对应的更改。

借鉴文章链接：> https://blog.csdn.net/qq706352062/article/details/105554453?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159652341219195188354739%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=159652341219195188354739&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allfirst_rank_ecpm_v3~pc_rank_v3-12-105554453.pc_ecpm_v3_pc_rank_v3&utm_term=%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%BD%A6%E7%89%8C%E8%BE%93%E5%85%A5%E9%94%AE%E7%9B%98&spm=1018.2118.3001.4187

效果图如下：

直接上代码！

WXML代码：

点击查看代码 
  1. <!-- 车牌号码输入框 -->
  2. <view wx:for="{{carNum}}" wx:key="index" class="text-center inline-block" bind:tap='openKeyboard'>
  3.   <!-- 点 -->
  4.   <text wx:if="{{ index === 2 }}" class="inline-block ml-5 mr-5 fs-40">.</text>
  5.   <!-- 普通车牌 -->
  6.   <input wx:if="{{ index !== 7 }}" model:value="{{ item.value }}" data-index="{{index}}" class="com-carNumber-item {{ item.focus ? 'com-focus' : ''}}" />
  7.   <!-- 新能源车牌 -->
  8.   <input wx:else model:value="{{!showNewPower ? '+' : item.value }}" data-index="{{index}}" class="com-carNumber-item {{showNewPower ? item.focus ? 'com-focus' : '': 'com-carNumber-item-newpower'}}" />
  9. </view>
  11. <!-- 虚拟键盘 -->
  12. <view class="com-keyboard" hidden='{{!KeyboardState}}'>
  13.   <view class="com-keyboardConfirm flex-center">
  14.     <text class="com-vehicleTip bold flex-center">请输入车牌号</text>
  15.     <view class="com-separator"></view>
  16.     <view class="com-keyboardConfirm_btn bold" bindtap='confirmKeyboard'>完成</view>
  17.   </view>
  18.   <!-- 省份简写键盘 -->
  19.   <view class="com-keyboard-item" hidden="{{ focusIndex !== 0 }}">
  20.     <view wx:for="{{provinces}}" wx:key="index" class="com-keyboard-line">
  21.       <view wx:for="{{item}}" wx:key="index" wx:for-item="char" data-val="{{char}}" class="com-keyboard-btn" bindtap='bindChoose'>{{char}}</view>
  22.     </view>
  23.   </view>
  24.   <!-- 车牌号码选择键盘 -->
  25.   <view class="com-keyboard-item com-carNumber" hidden="{{focusIndex === 0}}">
  26.     <!-- 数字键盘 -->
  27.     <view wx:for="{{numbers}}" wx:key="index" class="com-keyboard-line">
  28.       <view wx:for="{{item}}" wx:key="index" wx:for-item="char" data-val="{{char}}" class="{{ focusIndex !== 1 ? 'com-keyboard-btn' : 'com-keyboard-disabled-btn' }}" bindtap="{{ focusIndex !== 1 ? 'bindChoose' : '' }}">{{char}}</view>
  29.     </view>
  30.     <!-- 字母键盘 -->
  31.     <view wx:for="{{letters}}" wx:key="index" class="com-keyboard-line">
  32.       <view wx:for="{{item}}" wx:key="index" wx:for-item="char" data-val="{{char}}" class="{{ focusIndex !== 6 && (char === '挂' || char === '港' || char === '澳' || char === '学') ? 'com-keyboard-disabled-btn' : 'com-keyboard-btn'}}" bindtap="bindChoose">{{char}}</view>
  33.     </view>
  34.     <view class="com-keyboard-del" bindtap='bindDelChoose'>
  35.       <text class="fs-40">删除</text>
  36.     </view>
  37.   </view>
  38. </view>

JS代码：

点击查看代码 
  1. import { isEmpty, validate } from '../../utils/util';
  2. const icon = 'none', duration = 3000
  4. const component = {
  6.   properties: {
  7.     vehicleNo: { type: String, value: undefined } // 车牌号
  8.   },
  9.   data: {
  10.     provinces: [ // 省份键盘
  11.       ['京', '沪', '粤', '津', '冀', '晋', '蒙', '辽', '吉', '黑'],
  12.       ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
  13.       ['桂', '琼', '渝', '川', '贵', '云', '藏'],
  14.       ['陕', '甘', '青', '宁', '新']
  15.     ],
  16.     numbers: [ // 数字键盘
  17.       ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
  18.     ],
  19.     letters: [ // 字母键盘
  20.       ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K'],
  21.       ['L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V'],
  22.       ['W', 'X', 'Y', 'Z', '挂', '港', '澳', '学']
  23.     ],
  24.     specialChar: ['挂', '港', '澳', '学'], // 特殊字符
  25.     carNum: Array(8).fill({ value: undefined, focus: false }),
  26.     focusIndex: 0, // 输入库焦点索引
  27.     showNewPower: false, // 是否新能源车牌
  28.     KeyboardState: false // 是否弹出虚拟键盘
  29.   },
  30.   attached() {
  31.     const v = this
  32.     const vehcles = v.data.vehicleNo.split('')
  33.     const carNum = v.data.carNum
  34.     vehcles.forEach((m, i) => { carNum[i].value = m })
  35.     v.setData({ carNum })
  36.   },
  37.   /**
  38.  * 组件的方法列表
  39.  */
  40.   methods: {
  41.     // 车牌输入框点击展开车牌键盘
  42.     openKeyboard(e) {
  43.       const v = this
  44.       const focusIndex = e.target.dataset.index
  45.       let carNum = v.data.carNum
  46.       let showNewPower = v.data.showNewPower
  48.       // 添加新能源尾数
  49.       if (focusIndex === 7) {
  50.         if (isEmpty(v.data.carNum[6].value)) return wx.showToast({ title: '为新能源车牌时，前几位车牌号不能为空', icon, duration })
  51.         if (v.data.specialChar.includes(v.data.carNum[6].value)) return wx.showToast({ title: `为新能源车牌时，第6位车牌号不能为'${v.data.carNum[6].value}'`, icon, duration })
  53.         showNewPower = true
  54.         v.setData({ showNewPower, KeyboardState: true })
  55.       }
  57.       // 当前点击获得焦点，其余失去焦点
  58.       carNum[focusIndex].focus = true
  59.       carNum = carNum.map((item, index) => {
  60.         return { ...item, focus: index === focusIndex ? item.focus : false }
  61.       })
  62.       // 点击索引不为新能源时
  63.       if (focusIndex !== 7) showNewPower = false
  65.       v.setData({ KeyboardState: true, focusIndex, carNum, showNewPower })
  66.     },
  67.     // 键盘选中点击设置
  68.     bindChoose(e) {
  69.       const v = this
  70.       const val = e.target.dataset.val
  71.       const carNum = v.data.carNum
  72.       let focusIndex = v.data.focusIndex
  73.       if (focusIndex !== 6 && v.data.specialChar.includes(val)) return
  75.       // 当前选中车牌无值时更新为输入值
  76.       if (isEmpty(carNum[focusIndex].value)) {
  77.         carNum[focusIndex].value = val
  78.         carNum[focusIndex].focus = false
  80.         const validate = v.data.showNewPower ? 7 : 6
  81.         // 上一位车牌取消聚焦
  82.         if (focusIndex < validate) focusIndex++
  83.         carNum[focusIndex].focus = true
  85.         v.setData({ carNum, focusIndex })
  86.       }
  87.     },
  88.     // 删除
  89.     bindDelChoose() {
  90.       const v = this
  91.       const carNum = v.data.carNum
  92.       let focusIndex = v.data.focusIndex
  93.       let showNewPower = v.data.showNewPower
  95.       // 如果删除第6位后继续删除 则focusIndex后退一位并删除第5位车牌 依此类推 
  96.       // 当删除至省份位车牌时，界面会控制取消删除按钮
  97.       if (isEmpty(carNum[focusIndex].value)) {
  98.         // 如果当前索引是新能源车牌 
  99.         if (focusIndex == 7) showNewPower = false
  100.         focusIndex--
  101.         carNum[focusIndex].value = undefined
  102.         carNum[focusIndex].focus = true
  103.         // 后一位车牌取消聚焦
  104.         carNum[focusIndex + 1].focus = false
  105.       }
  106.       else {
  107.         carNum[v.data.focusIndex].value = undefined
  108.         carNum[v.data.focusIndex].focus = true
  109.       }
  111.       v.setData({ carNum, focusIndex, showNewPower })
  112.     },
  113.     // 关闭虚拟键盘
  114.     confirmKeyboard() {
  115.       const v = this
  116.       const vheicleNo = v.data.carNum.map(m => m.value).join('');
  117.       if (!validate.vehicle(vheicleNo)) return wx.showToast({ title: '请输入正确的车牌', icon, duration })
  118.       v.setData({ KeyboardState: false })
  119.       v.triggerEvent('confirm', { vheicleNo })
  120.     }
  121.   }
  122. }
  124. Component(component);

WXSS代码：

点击查看代码 
  1. /* 车牌号码 */
  2. .com-carNumber-item {
  3.   width: 55rpx;
  4.   height: 60rpx;
  5.   font-size: 18px;
  6.   border: 2rpx solid #CCCCCC;
  7.   border-radius: 8rpx;
  8.   display: inline-block;
  9.   line-height: 30px;
  10.   margin: 0 2rpx;
  11.   vertical-align: middle;
  12.   caret-color: transparent;
  13. }
  15. .com-focus {
  16.   border: 4rpx solid #A8BFF3;
  17. }
  19. /* 新能源 */
  20. .com-carNumber-item-newpower {
  21.   border: 2rpx dashed #19e622;
  22.   background-color: #e1fde2;
  23.   color: #19e622;
  24.   font-size: 25px;
  25.   line-height: 45rpx;
  26. }
  28. /* 虚拟键盘 */
  29. .com-keyboard {
  30.   height: auto;
  31.   background: #d1d5d9;
  32.   position: fixed;
  33.   bottom: 0;
  34.   width: 100%;
  35.   left: 0;
  36.   padding-bottom: 30rpx;
  37. }
  39. .com-keyboard-item {
  40.   padding: 10rpx 0 5rpx 0;
  41.   position: relative;
  42.   display: block;
  43. }
  45. .com-vehicleTip {
  46.   flex: 1;
  47.   color: rgba(150, 179, 253, 1);
  48. }
  50. .com-separator {
  51.   width: 1px;
  52.   height: 50%;
  53.   background-color: #ccc;
  54.   margin: 0 10px;
  55. }
  57. .com-keyboardConfirm {
  58.   height: 70rpx;
  59.   background-color: #f7f7f7;
  60. }
  62. .com-keyboardConfirm_btn {
  63.   float: right;
  64.   line-height: 70rpx;
  65.   font-size: 15px;
  66.   margin-right: 30rpx;
  67.   color: #FFA500;
  68. }
  70. .com-keyboard-line {
  71.   margin: 0 auto;
  72.   text-align: center;
  73. }
  75. .com-carNumber .com-keyboard-line {
  76.   text-align: left;
  77.   margin-left: 5rpx;
  78. }
  80. .com-keyboard-btn {
  81.   font-size: 18px;
  82.   color: #333333;
  83.   background: #fff;
  84.   display: inline-block;
  85.   padding: 18rpx 0;
  86.   width: 63rpx;
  87.   text-align: center;
  88.   box-shadow: 0 2rpx 0 0 #999999;
  89.   border-radius: 10rpx;
  90.   margin: 5rpx 6rpx;
  91. }
  93. .com-keyboard-disabled-btn {
  94.   font-size: 18px;
  95.   color: #333333;
  96.   background: #cacaca;
  97.   display: inline-block;
  98.   padding: 18rpx 0;
  99.   width: 63rpx;
  100.   text-align: center;
  101.   box-shadow: 0 2rpx 0 0 #999999;
  102.   border-radius: 10rpx;
  103.   margin: 5rpx 6rpx;
  104. }
  106. .com-keyboard-del {
  107.   color: black;
  108.   background: #A7B0BC;
  109.   display: inline-block;
  110.   padding: 10rpx 25rpx;
  111.   box-shadow: 0 2rpx 0 0 #999999;
  112.   border-radius: 10rpx;
  113.   margin: 5rpx;
  114.   position: absolute;
  115.   bottom: 10rpx;
  116.   right: 12rpx;
  117. }

公用样式代码（app.wxss）：

点击查看代码 
  1. .text-center {
  2.   text-align: center;
  3. }
  5. .inline-block {
  6.   display: inline-block;
  7. }
  9. .ml-5 {
  10.   margin-left: 5rpx;
  11. }
  13. .mr-5 {
  14.   margin-right: 5;
  15. }
  17. .fs-40 {
  18.   font-size: 40rpx;
  19. }
  21. .bold {
  22.   font-weight: bold;
  23. }
  25. .flex-center {
  26.   display: flex;
  27.   align-items: center;
  28.   justify-content: center;
  29. }

公用JS代码：

点击查看代码 
  1. /**
  2.  * 是否都是空数据（类型：字符串，数值，对象，数组，布尔）
  3.  */
  4. const isEmpty = (...values) => {
  5.   const isEmptyFunc = (val) => {
  6.     switch (typeof val) {
  7.       case 'string':
  8.       case 'number': return !val // 数值0为空
  9.       case 'object':
  10.         // 数组
  11.         if (Array.isArray(val)) return val.length === 0
  12.         // null/对象
  13.         return val === null || Object.keys(val).length === 0
  14.       case 'boolean': return false // 布尔类型即非空
  15.       // undefined / function
  16.       default: return true
  17.     }
  18.   }
  19.   let result = true
  20.   values.forEach(m => { result = result && isEmptyFunc(m) })
  22.   return result
  23. }
  25. /**
  26.  * 验证
  27.  */
  28. const validate = {
  29.   /** 是车牌号 */
  30.   vehicle(value) {
  31.     let result = false
  32.     if (value && [7, 8].includes(value.length)) {
  33.       const express = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4,5}[A-Z0-9挂学警港澳]{1}$/
  34.       result = express.test(value)
  35.     }
  36.     return result
  37.   }
  38. }

上面gif生成是用 Windows 系统 Win+Shift+S 将操作截图成视频，再去这个网站 https://www.aconvert.com/cn/video/mp4-to-gif/ 将视频转成GIF

预览的时候把图片下载下来

原文链接：https://www.cnblogs.com/Scholars/p/18298456

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

微信小程序热门文章

  • 如何在微信小程序中实现音视频通话
  • 微信小程序调用摄像头实现拍照功能
  • 微信小程序隐私保护协议修改方法 uniapp
  • 微信小程序实现简单的购物车功能
  • 微信小程序访问mysql数据库流程详解
  • 微信小程序实现计算器案例
  • 微信小程序时间轴实现方法示例
  • 微信小程序使用uni-app开发小程序及部分功能实现详解
  • 微信小程序实现聊天室功能
  • 微信小程序底部tabBar遮挡内容的简单处理方法

    • 微信小程序推荐文章

  • 微信小程序车牌键盘输入组件（支持单个删除更改，支持赋值，支持新能源）
  • 小程序优化：第三方SDK过大解决方案
  • .NET生成微信小程序推广二维码
  • 微信小程序动态生成表单来啦！你再也不需要手写表单了！
  • web应用及微信小程序版本更新检测方案实践
  • 微信小程序隐私保护协议修改方法 uniapp
  • 如何在微信小程序中实现音视频通话
  • 微信小程序抢红包高并发设计
  • uni-app + .NET 7实现微信小程序订阅消息推送
  • 微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号