【微信小程序-原生 + Vant Weapp】LicenseKeyboard 车牌号键盘输入组件

已于 2023-09-19 14:09:14 修改
阅读量743 收藏 2
点赞数
分类专栏： 自定义组件 文章标签： 前端 微信小程序
于 2023-06-16 17:05:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Komorebi_00/article/details/131250209
版权
本文介绍了如何在微信小程序中使用原生开发结合Vant Weapp库，创建一个用于输入车牌号的LicenseKeyboard组件。包括组件的实际效果图展示，完整的代码实现，以及具体的使用示例，帮助开发者快速理解和应用此组件。
摘要由CSDN通过智能技术生成

1. 效果图

在这里插入图片描述

2. 组件完整代码

.wxml 文件

<view class="license-keyboard">
    <view
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Komorebi゛
关注
专栏目录
订阅专栏
【微信小程序-原生 + Vant Weapp】DatetimePicker组件切换日期时跳来跳去的解决办法
Komorebi_00的博客
02-18 986
微信小程序：时间日期组件DatetimePicker
【Vue2 + Vant】LicenseKeyboard 车牌号键盘输入组件
Komorebi_00的博客
09-19 481
车牌号键盘输入组件
微信小程序-虚拟车牌输入键盘组件vehicleKeyboard-master.zip
09-25
微信小程序-虚拟车牌输入键盘组件vehicleKeyboard-master.zip
uniapp vue3 车牌号输入组件
最新发布
qq_40924245的博客
10-08 318
vue3+uniapp 微信小程序车牌输入组件
微信小程序 车牌号输入组件
神尐破
08-21 1974
有时候我们开发过程中会遇到需要用户输入车牌号的情况，让客户通过自带键盘输入，体验不好且容易出错，例如车牌号是不能输入O和I的，因此需要有一个自定义的键盘，让客户输入正确的车牌号viewtools.wxs 主要作用是补0，让界面好看些，如果有需要可以在这里改逻辑实现// 把车牌字符串转为数组if (!
wx-vehicleKeyboard:微信小程序 车牌号输入键盘组件(vehicleKeyboard)
05-25
(实际使用时按键大小样式可能有点问题，自己修改就好辣 :) ) wx_vehicleKeyboard 微信小程序 车牌号输入键盘组件(vehicleKeyboard) 效果图 使用说明： 组件使用示例： "usingComponents": { "v-keyboard": "/components/vehicleKeyboard/vehicleKeyboard" } 组件属性： show: true/false 默认为true 虚拟键盘的显示与隐藏。 useInput: true/false 默认为true 是否使用组件中的输入框（如果不需要，可以仅仅使用虚拟键盘，获得输入车牌后自行处理后续业务逻辑） 方法： 在使用组件的页面的js代码中： handletapkey (e) { const platenum = e.detail.platenum console.l
微信小程序车牌键盘
weixin_33834679的博客
07-23 534
微信小程序车牌键盘 项目背景 公司要做一个停车场微信小程序，支持临时车预支付以及支付记录查询等功能,其中涉及车牌输入的功能，为了提升用户体验，避免繁琐的输入，决定自己写一个键盘。 效果图如下 省份简写键盘如下: 英文简写键盘如下: 源代码 目录结构 wxml文件内容 <view wx:if="{{isShow}}" class="vehicle-panel" style="height...
微信小程序车牌键盘录入demo
10-24
微信小程序车牌键盘录入demo，亲测可用，自定义键盘，符合车牌录入方式。此demo中包含整个页面，如有问题，请留言
微信小程序npm引入vant-weapp的踩坑记录
10-16
本文详细记录了在微信小程序项目中引入vant-weapp（一种基于Vue的轻量、可靠的移动端UI框架）时所遇到的一些问题及其解决方法。以下将根据文章内容，详细阐述微信小程序中使用npm引入依赖的流程、遇到的问题以及解决...
微信小程序 安装使用Vant Weapp
WANZ30的博客
07-13 892
微信小程序 安装使用Vant Weapp
微信小程序车牌号输入组件（虚拟键盘）
李水灵的博客
12-03 6767
本文参考 微信小程序中实现车牌输入功能， 进行了更加细致的键盘划分、删除等功能 文中给出代码都是截图，完整代码在文末贴出。 组件效果 组件功能： 其中虚拟键盘、新能源车牌等功能均可使用 封装成一个组件可以直接 Import 使用 可以给定默认初始值（如 gif 中所示） 父组件通过 change 事件可以监听到车牌号每一次的变化 组件部分样式也可以给定 class 来自定义 可以规范用户输入车牌号，防止乱输引起的数据库错乱 组件思路 根据车牌号的规则，根据不同的第几位生成键盘 例如：第一位为省.
微信小程序车牌组件代码
11-25
在小程序中做过一个需求——申请开通ETC。为实现该需求封装了一个小程序的组件。将该资源上传给有需要的人。也可用于停车场收费等场景
微信小程序车牌输入法
07-25
微信小程序车牌输入法，支持传统车牌和新能源车牌，封装为component
微信小程序车牌号输入器（可支持新能源），打开即可用，中国人不骗中国人
02-15
资源中是完整的一套小程序代码，代码直接用微信开发者工具导入后，编译即可运行。其中的内容是微信小程序的车牌号输入器，可支持常规的7位牌照和新能源的8位牌照。源码完全使用原生代码开发，方便支持各位亲二次开发，希望能够帮到大家。
微信小程序 自定义车牌键盘测试demo
12-15
微信小程序 自定义车牌键盘 测试demo
微信小程序实现车牌号输入自定义键盘
qq_34724739的博客
09-26 1867
实现输入车牌号功能，I是在车牌号里不能输入得，在键盘上就没有展示，O是只在第二位上可以输入，addCarNumber 是保存接口了。js data键盘信息是写死得。
微信小程序使用车牌号输入法
ZJW222的博客
08-19 2514
在做小程序时，做了一个关于车的项目，然后需要添加车辆信息、添加车牌号，使用车牌键盘输入，当时我把这个需求给砍了，然后在添加车辆信息时，老大看到数据库里我乱填的车牌号，又让我把他加上了^o^ 1.效果图 2.相关代码 使用组件形式实现键盘输入 组件代码index.wxml <view class="carPlate" wx:if="{{show}}"> <bloc...
微信小程序车牌号组件，车牌号键盘，兼容新能源号牌
huyanbinweb的专栏
12-02 1265
微信小程序车牌号组件，车牌号键盘，兼容新能源号牌，虚拟键盘
微信小程序快速集成vant-weapp教程
微信小程序引入 vant-weapp 是为了在小程序开发中使用 vant 这个流行的移动端 UI 库，它提供了丰富的组件和样式，帮助开发者快速构建美观的用户界面。 vant-weapp 是 vant UI 专门为微信小程序定制的版本。 1. **...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Komorebi゛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值