微信小程序 车牌号输入组件
概述
一个小组件,用于方便用户输入车牌号码
详细
概述
有时候我们开发过程中会遇到需要用户输入车牌号的情况,让客户通过自带键盘输入,体验不好且容易出错,例如车牌号是不能输入O和I的,因此需要有一个自定义的键盘,让客户输入正确的车牌号
详细
效果展示

实现思路
1 布局设计
让输入的框弹出,方便输入<view wx:for="{{inputList}}" wx:key="*this" class="{{item.type}} {{index === 1 || index === 8 ? 'border_right':''}} {{index === input_active_index ? 'input_active' : ''}}"bindtap="tapInput" data-index="{{index}}" data-item="{{item}}">{{item.value || ''}}</view><view class="backward" bindtap="tapDel"><image class="icon_backward" src="/img/backward.svg"/></view>css:.main {background: rgba(0, 0, 0, 0.6);height: 100vh;z-index: 999;position: fixed;top: 0px;width: 100%;}.main_panel {position: absolute;width: 100%;bottom: 0px;}
2 数据设计
把合法输入的字符,列出来
provinceList: '京沪粤津浙苏湘渝云豫皖陕桂新青琼闽蒙辽宁鲁晋吉翼黑甘鄂赣贵川藏使'.split(''),numberList: '0123456789ABCDEFGHJKLMNPQRSTUVWXYZ挂港澳警领学'.split(''),
3 使用组件
在json文件中引用{"usingComponents": {"carnum_input": "/component/carnumber_input/carnumber_input"}}定义好监听车牌输入,输入框关闭的事件,即可获取输入内容<carnum_input show="{{showCarnumInput}}" bind:getCarNumber="getCarNumber"bind:closeCarNumberInput="closeCarNumberInput"/>
工具类介绍
viewtools.wxs 主要作用是补0,让界面好看些,如果有需要可以在这里改逻辑实现
module.exports = {// 把车牌字符串转为数组getCarNumberList: function (carNum) {var ret = ' • ';if (!carNum || carNum.trim() === '' || carNum === undefined) return ret;var supplementNumber = 9 - carNum.trim().length;for(var i = 0; i < supplementNumber; i++) {carNum+=' '}ret = carNum;return ret;}}
目录结构

相关文章:
微信小程序 车牌号输入组件
概述 一个小组件,用于方便用户输入车牌号码 详细 概述 有时候我们开发过程中会遇到需要用户输入车牌号的情况,让客户通过自带键盘输入,体验不好且容易出错,例如车牌号是不能输入O和I的,因此需要有一个自定义的键盘…...
Bootstrap Blazor 实战动态表单组件
1.新建工程 源码 新建工程b18ValidateForm,使用 nuget.org 进行 BootstrapBlazor 组件安装, Chart 库,字体. 将项目添加到解决方案中 dotnet new blazorserver -o b18ValidateForm dotnet add b06chart package BootstrapBlazor dotnet add b06chart package BootstrapBlazo…...
Elasticsearch 集成---Spark Streaming 框架集成
一.Spark Streaming 框架介绍 Spark Streaming 是 Spark core API 的扩展,支持实时数据流的处理,并且具有可扩展, 高吞吐量,容错的特点。 数据可以从许多来源获取,如 Kafka , Flume , Kin…...
Kotlin 中的 协程 基础篇
一、什么叫协程 协程可以称为轻量级线程,线程代码块; 二、GlobalScope 协程 CoroutineScope (协程作用域) 的上下文中通过 launch、async 等构造器来启动。GlobalScope ,即全局作用域内启动了一个新的协程,这意味这该协程的生命周期只受整…...
SQL事务
事务的概念: 事务是在数据库上按照一定的逻辑顺序执行的任务序列,既可以由用户手动执行,也可以由某种数据库程序自动执行。事务就是一些SQL语句组(每条单独的SQL语句也算一个事务),其中事务中的SQL…...
关于flutter中 initState() 与 setState() 用法
initState()函数是在组件渲染之前执行的。在Flutter中,initState()是StatefulWidget的生命周期方法之一,在调用build()方法之前被调用。当创建一个StatefulWidget并将其添加到组件树中时,Flutter会实例化该组件的状态对象,并在调用…...
智能电话机器人是如何自主学习的
电话机器人主要通过语音识别和针对语意的理解识别客户所说的内容,针对性的回答问题,为企业高效筛选意向客户。除了电话机器人语音识别之外,电话机器人能够自主学习,不断完善产品知识及话术等,是它智能的另一种体现。那…...
【Rust】Rust学习 第十八章模式用来匹配值的结构
模式是 Rust 中特殊的语法,它用来匹配类型中的结构,无论类型是简单还是复杂。结合使用模式和 match 表达式以及其他结构可以提供更多对程序控制流的支配权。模式由如下一些内容组合而成: 字面值解构的数组、枚举、结构体或者元组变量通配符占…...
我的学习笔记:数据处理
数据清洗 对数据进行处理和加工,以使其适合分析和建模。数据清洗包括去除重复数据、填补缺失值、处理异常值和转换数据格式等操作,以提高数据的可靠性和准确性,避免数据分析时出现偏差,提高决策的准确性。 数据去重:通…...
GB28181国标平台测试软件NTV-GBC(包含服务器和模拟客户端)
GB28181国标平台测试软件NTV-GBC用于对GB28181国标平台进行测试(测试用例需要服务器软件,服务器软件可以是任何标准的国标平台,我们测试使用的是NTV-GBS),软件实现了设备注册、注销、目录查询,消息订阅、INVITE&#x…...
云原生:重塑企业的技术疆界
云原生技术正在重新塑造我们对软件开发、部署和运维的理解。这些技术带来了灵活性、可扩展性以及在复杂环境中保证稳定性的可能性,这些都是企业在云原生场景中比较关注的问题。本文将主要聚焦于云原生场景,探讨其影响和作用。 云原生的定义 云原生计算基…...
华为星闪,一项将 “ 更稳 WiFi ” 和 “ 更好蓝牙 ” 融合起来的通信标准
兼顾多用途和专业化的 AI 大模型、移除安卓代码的 HarmonyOS NEXT 、给折叠屏应用提供适配方向的《 折叠屏/平板应用体验评估标准 》。。。 不过除了这些比较贴近我们普通用户,容易讲清楚的东西,华为还官宣了一个大家可能没注意的黑科技: 星…...
IDEA创建Mybatis格式XML文件
设置位置:File | Settings | Editor | File and Code Templates 选择Files,点击号 Name中输入xml模板名(名称自行决定),后缀名extension输入xml(固定) 内容处输入Mybatis的xml文件模板内容&…...
二叉树中的最大路径和-递归
路径 被定义为一条从树中任意节点出发,沿父节点-子节点连接,达到任意节点的序列。同一个节点在一条路径序列中 至多出现一次 。该路径 至少包含一个 节点,且不一定经过根节点。 路径和 是路径中各节点值的总和。 给你一个二叉树的根节点 root…...
Python if-else 速记
文章目录 在 Python 中使用三元运算符作为 if-else 速记总结 编程中经常使用速记符号来简化我们的工作。 速记符号是一种可以更简洁、更省时省力地完成工作的方法。 本文将讨论 Python 中使用的速记符号作为 if-else 语句的快捷方式。 在 Python 中使用三元运算符作为 if-else…...
Python使用内置的json模块来处理JSON数据
目录 1、解释说明: 2、使用示例: 3、注意事项: 1、解释说明: 在Python中,我们可以使用内置的json模块来处理JSON数据。这个模块提供了四个主要的函数:dumps、loads、dump、load。 - dumps:将…...
亿赛通电子文档安全管理系统 RCE漏洞
亿赛通电子文档安全管理系统 RCE漏洞 一、 产品简介二、 漏洞概述三、 复现环境四、 漏洞复现小龙POC检测: 五、 修复建议 免责声明:请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失…...
信息安全面试题合集
0x00 前言 本篇会记录一些可能会遇到的面试题,持续更新 0x01 Web SQL注入 sql注入常见的闭合方式有哪些?Mysql5.0上下sql注入有什么区别?SQL注入空格被过滤,有什么绕过方式?过滤了逗号,有什么绕过方式&…...
vue 简单实验 自定义组件 传参数 props
1.代码 <script src"https://unpkg.com/vuenext" rel"external nofollow" ></script> <div id"todo-list-app"><todo-item v-bind:todo"todo1"></todo-item> </div> <script> const ListR…...
目标检测笔记(十一):如何结合特定区域进行目标检测(基于OpenCV的人脸检测实例)
文章目录 背景代码结果 背景 由于我们在做项目的时候可能会涉及到某个指定区域进行目标检测或者人脸识别等任务,所以这篇博客是为了探究如何在传统目标检测的基础上来结合特定区域进行检测,以OpenCV自带的包为例。 一般来说有两种方式实现区域指定&…...
CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架,相比 MapReduce 具有以下核心优势: 内存计算:数据可常驻内存,迭代计算性能提升 10-100 倍(文档段落:3-79…...
大语言模型如何处理长文本?常用文本分割技术详解
为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持,不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)
1.获取 authorizationCode: 2.利用 authorizationCode 获取 accessToken:文档中心 3.获取手机:文档中心 4.获取昵称头像:文档中心 首先创建 request 若要获取手机号,scope必填 phone,permissions 必填 …...
企业如何增强终端安全?
在数字化转型加速的今天,企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机,到工厂里的物联网设备、智能传感器,这些终端构成了企业与外部世界连接的 “神经末梢”。然而,随着远程办公的常态化和设备接入的爆炸式…...
算法:模拟
1.替换所有的问号 1576. 替换所有的问号 - 力扣(LeetCode) 遍历字符串:通过外层循环逐一检查每个字符。遇到 ? 时处理: 内层循环遍历小写字母(a 到 z)。对每个字母检查是否满足: 与…...
【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论
路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中(图1): mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...
mac 安装homebrew (nvm 及git)
mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用: 方法一:使用 Homebrew 安装 Git(推荐) 步骤如下:打开终端(Terminal.app) 1.安装 Homebrew…...
站群服务器的应用场景都有哪些?
站群服务器主要是为了多个网站的托管和管理所设计的,可以通过集中管理和高效资源的分配,来支持多个独立的网站同时运行,让每一个网站都可以分配到独立的IP地址,避免出现IP关联的风险,用户还可以通过控制面板进行管理功…...
