uniapp、微信小程序车牌的录入的解决方案

2024-08-30 05:36

本文主要是介绍uniapp、微信小程序车牌的录入的解决方案,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

结合uv-ui进行编写,键盘使用uv-ui的组件,其他由我们自己编写。

<template><div class="addCarContent"><div class="boxContent"><div class="carCodeInput" @click="getIndex"><div:class="[index === 0 && showActive ? 'input_active' : '', 'input']">{{ CarCode[0] }}</div><div:class="[index === 1 && showActive ? 'input_active' : '', 'input']">{{ CarCode[1] }}</div><div class="point"></div><div:class="[index === 2 && showActive ? 'input_active' : '', 'input']">{{ CarCode[2] }}</div><div:class="[index === 3 && showActive ? 'input_active' : '', 'input']">{{ CarCode[3] }}</div><div:class="[index === 4 && showActive ? 'input_active' : '', 'input']">{{ CarCode[4] }}</div><div:class="[index === 5 && showActive ? 'input_active' : '', 'input']">{{ CarCode[5] }}</div><div:class="[index === 6 && showActive ? 'input_active' : '', 'input']">{{ CarCode[6] }}</div><div:class="[index === 7 && showActive ? 'input_active' : '', 'input']">{{ CarCode[7] }}</div></div></div><uv-keyboardref="keyboard"mode="car"@change="change":showTips="false"@confirm="confirm"@backspace="backspace":autoChange="true":overlay="true":safeAreaInsetBottom="true":confirmText="'完成'"@changeCarInputMode="changeCarInputMode"@close="closeKey"><template v-slot:abc><text v-if="isABC">省份</text><text v-else>ABC</text></template></uv-keyboard></div>
</template><script>
export default {data() {return {CarCode: ["", "", "", "", "", "", "", ""],index: "",isABC: false,showActive: false,checkboxValue: ["true"],};},onShow() {this.getIndex();},mounted() {},methods: {closeKey() {this.showActive = false;},changeCarInputMode(e) {this.isABC = e;},getIndex() {let index = this.CarCode.indexOf("");if (index !== -1) {this.index = index;} else {this.index = 7;}this.$refs.keyboard.open();this.showActive = true;},change(e) {console.log("change", e, this.index);if (this.index <= 7) {this.CarCode[this.index] = e;this.index++;if (this.index > 7) {this.$refs.keyboard.close();this.showActive = false;this.index--;}}console.log("changeEnd", this.CarCode);},confirm() {console.log("confirm");},backspace() {console.log("backspace", this.index);if (this.index === 1) {this.$refs.keyboard.changeCarMode();}if (this.index >= 0) {if (this.CarCode[this.index] === "") {this.index--;this.CarCode[this.index] = "";} else {this.CarCode[this.index] = "";}if (this.index < 0) {this.index = 0;}}this.$forceUpdate();console.log("backspaceEnd", this.CarCode, this.index);},},
};
</script>

这篇关于uniapp、微信小程序车牌的录入的解决方案的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1119925

相关文章

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

golang程序打包成脚本部署到Linux系统方式

《golang程序打包成脚本部署到Linux系统方式》Golang程序通过本地编译(设置GOOS为linux生成无后缀二进制文件),上传至Linux服务器后赋权执行,使用nohup命令实现后台运行,完... 目录本地编译golang程序上传Golang二进制文件到linux服务器总结本地编译Golang程序

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

Java 线程安全与 volatile与单例模式问题及解决方案

《Java线程安全与volatile与单例模式问题及解决方案》文章主要讲解线程安全问题的五个成因(调度随机、变量修改、非原子操作、内存可见性、指令重排序)及解决方案,强调使用volatile关键字... 目录什么是线程安全线程安全问题的产生与解决方案线程的调度是随机的多个线程对同一个变量进行修改线程的修改操

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试

全面解析MySQL索引长度限制问题与解决方案

《全面解析MySQL索引长度限制问题与解决方案》MySQL对索引长度设限是为了保持高效的数据检索性能,这个限制不是MySQL的缺陷,而是数据库设计中的权衡结果,下面我们就来看看如何解决这一问题吧... 目录引言:为什么会有索引键长度问题?一、问题根源深度解析mysql索引长度限制原理实际场景示例二、五大解决

SpringSecurity显示用户账号已被锁定的原因及解决方案

《SpringSecurity显示用户账号已被锁定的原因及解决方案》SpringSecurity中用户账号被锁定问题源于UserDetails接口方法返回值错误,解决方案是修正isAccountNon... 目录SpringSecurity显示用户账号已被锁定的解决方案1.问题出现前的工作2.问题出现原因各

javax.net.ssl.SSLHandshakeException:异常原因及解决方案

《javax.net.ssl.SSLHandshakeException:异常原因及解决方案》javax.net.ssl.SSLHandshakeException是一个SSL握手异常,通常在建立SS... 目录报错原因在程序中绕过服务器的安全验证注意点最后多说一句报错原因一般出现这种问题是因为目标服务器

C++高效内存池实现减少动态分配开销的解决方案

《C++高效内存池实现减少动态分配开销的解决方案》C++动态内存分配存在系统调用开销、碎片化和锁竞争等性能问题,内存池通过预分配、分块管理和缓存复用解决这些问题,下面就来了解一下... 目录一、C++内存分配的性能挑战二、内存池技术的核心原理三、主流内存池实现:TCMalloc与Jemalloc1. TCM

MyBatis Plus 中 update_time 字段自动填充失效的原因分析及解决方案(最新整理)

《MyBatisPlus中update_time字段自动填充失效的原因分析及解决方案(最新整理)》在使用MyBatisPlus时,通常我们会在数据库表中设置create_time和update... 目录前言一、问题现象二、原因分析三、总结:常见原因与解决方法对照表四、推荐写法前言在使用 MyBATis