uniapp实现一个键盘功能

前言

因为公司需要,所以我....

演示

 

代码

键盘组件代码

<template><view class="keyboard_container"><view class="li" v-for="(item, index) in arr" :key="index" @click="changArr(item)" :style="item=='删除' ? 'width: 122rpx' : item=='空格' ? 'width: 254rpx' : ''"><view>{{item}}</view></view></view>
</template><script>export default {data() {return {arr: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f", "g", "h","i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "u", "x", "y", "z","符", "大","删除"]};},methods: {changArr(text) {let isReturn = trueswitch(text) {case '返':this.test0()isReturn = falsebreakcase '符':this.test2()isReturn = falsebreakcase '大':this.test1()isReturn = falsebreakcase '小':this.test0()isReturn = falsebreak}isReturn ? this.$emit("onClickText", text) : ''},test0() {let arr1 = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9","a", "b", "c", "d", "e", "f", "g", "h","i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "u", "x", "y", "z","符", "大","删除"]this.arr = arr1},test1() {let arr1 = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9","A", "B", "C", "D", "E", "F", "G", "H","I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "U", "X", "Y", "Z","符", "小","删除"]this.arr = arr1},test2() {let arr1 = ["!", "''", "#", "$", "%", "&", "(", ")", "'", "*","+", ",", "-", ".", "/", ":", ";", "<","=",">", "?", "@", "[", "]", "\\", "^","_", "`", "{", "|", "}", "~", "空格", "返", "大","删除"]this.arr = arr1}}}
</script><style lang="scss" scoped>.keyboard_container {width: 100%;display: flex;flex-wrap: wrap;// background-color: gold;.li {font-size: 32rpx;width: 56rpx;height: 56rpx;line-height: 56rpx;margin-left: 10rpx;border-radius: 4rpx;text-align: center;color: #fff;background-color: #1890ff;}.li:active {background-color: #BBBBBB;color: #fff;}.li:first-child {margin-left: 0rpx;}.li:nth-child(9) {margin-left: 0rpx;}.li:nth-child(17) {margin-left: 0rpx;}.li:nth-child(25) {margin-left: 0rpx;}.li:nth-child(33) {margin-left: 0rpx;}.li:nth-child(n+9) {margin-top: 10rpx;}}
</style>

使用代码

<template><view class="buyCard_container"><view class="content"><view class="left"><view class="list"></view></view><view class="right"><keyboard @onClickText="clickText"></keyboard></view></view></view>
</template><script>export default {data() {return {studentNumber: '',}},onLoad() {},methods: {clickText(text) {console.log(text)if (text == '空格') {text = ' '}if (text == '删除') {this.studentNumber = this.studentNumber.substring(0,                 this.studentNumber.length - 1)return false}this.studentNumber = this.studentNumber + text}}}
</script><style lang="scss" scoped></style>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

初学Spring之 AOP 面向切面编程

AOP&#xff08;Aspect Oriented Programming&#xff09;面向切面编程 通过预编译方式和运行期间动态代理实现程序功能的统一维护的一种技术 是面向对象&#xff08;OOP&#xff09;的延续 AOP 在 Spring 中的作用&#xff1a; 1.提供声明式事务 2.允许用户自定义切面 导…

Objects365数据集介绍

Objects365数据集介绍 什么是Objects365数据集&#xff1f;数据集的规模与内容数据集的特点数据集下载 什么是Objects365数据集&#xff1f; Objects365是一个大规模、高质量的物体检测数据集。该数据集旨在推动物体检测技术的发展&#xff0c;特别是在真实世界场景下的应用。O…

【python】python当当数据分析可视化聚类支持向量机预测(源码+数据集+论文)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

基于java+springboot+vue实现的校园外卖服务系统(文末源码+Lw)292

摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;外卖信息因为其管理内容繁杂&#xff0c;管理数量繁多导致手工进行处理不能满足广…

使用Charles mock服务端响应数据

背景 服务端未提供接口/服务端接口返回结果有逻辑限制&#xff08;次数限制&#xff09;&#xff0c;不能通过原始接口返回多次模拟预期的返回结果&#xff0c;例如边界值情况 客户端受到接口响应数据的限制&#xff0c;无法继续开发或测试&#xff0c;会极大影响开发测试效率…

QT滑块图片验证程序

使用QT实现滑块验证程序&#xff0c;原理是画个图片&#xff0c;然后在图片上画个空白区域&#xff0c;再画个滑块图片。 widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widg…

文心智能体平台快速创建一个HY(Lisp)编程小助手

现在可以在文心智能体平台&#xff0c;使用文心一言创建各种智能体了&#xff01;创建步骤如下&#xff1a; 创建知识库 可以使用本地上传的方式来提交&#xff0c;鼠标移动到”查看模板“&#xff0c;可以下载”知识库外链上传示例模版.xlsx“&#xff0c;按照模板里的格式&…

8.14 矢量图层面要素2.5D渲染

文章目录 前言2.5D渲染QGis设置面符号为2.5D二次开发代码实现2.5D 总结 前言 本章介绍矢量图层面要素2.5D渲染的使用说明&#xff1a;文章中的示例代码均来自开源项目qgis_cpp_api_apps 2.5D渲染 2.5D渲染可以将多边形渲染为类3D效果。 QGis设置面符号为2.5D 以"hou…

生成式AI的短板在于“Token”的存在

生成式AI模型处理文本的方式与人类不同。理解它们基于“token”的内部环境&#xff0c;可能有助于解释一些奇怪行为和固有局限性。 从小型设备上的Gemma到OpenAI领先行业的GPT-4o&#xff0c;大多数模型都是基于一种称为Transformer的架构。由于Transformer在将文本与其他类型…

[Multi-Modal] MDETR 论文及代码学习笔记

代码地址&#xff1a;https://github.com/ashkamath/mdetr 论文地址&#xff1a;https://arxiv.org/abs/2104.12763 多模态推理系统依靠预先训练的目标检测器从图像中提取感兴趣区域&#xff08;边界框包围区域&#xff09;。然而&#xff0c;这个关键模块通常被用作黑匣子&…

飞书 API 2-4:如何使用 API 将数据写入数据表

一、引入 上一篇创建好数据表之后&#xff0c;接下来就是写入数据和对数据的处理。 本文主要探讨数据的插入、更新和删除操作。所有的操作都是基于上一篇&#xff08;飞书 API 2-4&#xff09;创建的数据表进行操作。上面最终的数据表只有 2 个字段&#xff1a;序号和邮箱。序…

英语学习交流小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;每日打卡管理&#xff0c;备忘录管理&#xff0c;学习计划管理&#xff0c;学习资源管理&#xff0c;论坛交流 微信端账号功能包括&#xff1a;系统首页&#xff0c;学习资源&…

C++基础(八):类和对象 (下)

经过前面的学习&#xff0c;我们已经翻过了两座大山&#xff0c;类和对象入门知识就剩下这一讲了&#xff0c;加油吧&#xff0c;少年&#xff01; 目录 一、再谈构造函数 1.1 构造函数体赋值 1.2 初始化列表&#xff08;理解&#xff09; 1.3 explicit关键字&#xff08;C…

【Java探索之旅】继承概念_语法_父类的成员访问

文章目录 &#x1f4d1;前言一、继承1.1 继承的概念1.2 继承语法1.3 继承发生后 二、父类的访问2.1 父类成员变量访问2.2 父类成员方法访问 &#x1f324;️全篇总结 &#x1f4d1;前言 在面向对象编程中&#xff0c;继承是一种重要的概念&#xff0c;它允许我们创建一个类&…

html的作业

目录 作业题目 1.用户注册 A图 B代码 2.工商银行电子汇款单 A图 B代码 3.李白诗词 A图 B代码 4.豆瓣电影 A图 B代码 学习产出&#xff1a; 作业题目 1.用户注册 A图 B代码 <!DOCTYPE html> <html lang"zh"> <head><meta charset&qu…

Java技术栈总结:Redis篇

一、数据类型 Redis 自身是一个 Map&#xff0c;其中的所有数据均采用“key:value”的形式存储。 数据类型指的是存储的数据的类型&#xff0c;即 value 部分的类型&#xff0c;key 的部分只能是字符串。 value 部分的数据类型&#xff1a;<String、List、Hash、Set、Zse…

MSPM0G3507——编码器控制速度

绿色设置的为目标值100&#xff0c;红色为编码器实际数据 。 最后也是两者合在了一起&#xff0c;PID调试成功。 源码直接分享&#xff0c;用的是CCStheia&#xff0c;KEIL打不开。大家可以看一下源码的思路&#xff0c;PID部分几乎不用改 链接&#xff1a;https://pan.baid…

S32DS S32 Design Studio for S32 Platform 3.5 代码显示行号与空白符

介绍 NXP S32DS&#xff0c;全称 S32 Design Studio&#xff0c;s32 系列芯片默认使用 S32 Design Studio for S32 Platform 作为 IDE 集成开发环境&#xff0c;当前版本 S32 Design Studio for S32 Platform 3.5&#xff0c;IDE 可以简称 s32DS 使用 S32DS&#xff0c;可以认…

Qt 网络编程 网络信息获取操作

学习目标&#xff1a;网络信息获取操作 前置环境 运行环境:qt creator 4.12 学习内容 一、Qt 网络编程基础 Qt 直接提供了网络编程模块,包括基于 TCP/IP 的客户端和服务器相关类,如 QTcpSocket/QTcpServer 和 QUdpSocket,以及实现 HTTP、FTP 等协议的高级类,如 QNetworkRe…

【简单介绍下Memcached】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…