当前位置: 首页 > news >正文

前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input

前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13166

效果图如下:

# cc-defineKeyboard

#### 使用方法

```使用方法

<!-- ref:唯一ref  passwrdType:密码样式pay keyInfo:密码输入监测事件 -->

<cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"></cc-defineKeyboard>

/** * 唤起键盘 */

onPayUp() {

this.$refs.CodeKeyboard.show();

},

/*** 支付键盘回调* @param {Object} val */

KeyInfo(val) {

if (val.index >= 6) {

return;

}

// 判断是否输入的是删除键

if (val.keyCode === 8) {

// 删除最后一位

this.passwordArr.splice(val.index + 1, 1)

}

// 判断是否输入的是.

else if (val.keyCode == 190) {

// 输入.无效

} else {

this.passwordArr.push(val.key);

}

uni.showModal({

title: '温馨提示',

content: '输入密码是 = ' + JSON.stringify(this.passwordArr)

})

}

```

#### HTML代码实现部分

```html

<template>

<view class="page">

<view>

<view class="pay-title">

<text v-show="AffirmStatus === 1">请输入6位支付密码</text>

<text v-show="AffirmStatus === 2">请设置6位支付密码</text>

<text v-show="AffirmStatus === 3">请确认6位支付密码</text>

</view>

<view class="pay-password" @click="onPayUp">

<view class="list">

<text v-show="passwordArr.length >= 1">●</text>

</view>

<view class="list">

<text v-show="passwordArr.length >= 2">●</text>

</view>

<view class="list">

<text v-show="passwordArr.length >= 3">●</text>

</view>

<view class="list">

<text v-show="passwordArr.length >= 4">●</text>

</view>

<view class="list">

<text v-show="passwordArr.length >= 5">●</text>

</view>

<view class="list">

<text v-show="passwordArr.length >= 6">●</text>

</view>

</view>

<view class="hint">

<text>忘记支付密码?</text>

</view>

</view>

<!-- ref:唯一ref  passwrdType:密码样式pay keyInfo:密码输入返回事件 -->

<cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"></cc-defineKeyboard>

</view>

</template>

<script>

export default {

components: {

},

data() {

return {

AffirmStatus: 1,

passwordArr: [],

oldPasswordArr: [],

newPasswordArr: [],

afPasswordArr: [],

};

},

onLoad() {

},

methods: {

/**

* 唤起键盘

*/

onPayUp() {

this.$refs.CodeKeyboard.show();

},

/**

* 支付键盘回调

* @param {Object} val

*/

KeyInfo(val) {

if (val.index >= 6) {

return;

}

// 判断是否输入的是删除键

if (val.keyCode === 8) {

// 删除最后一位

this.passwordArr.splice(val.index + 1, 1)

}

// 判断是否输入的是.

else if (val.keyCode == 190) {

// 输入.无效

} else {

this.passwordArr.push(val.key);

}

uni.showModal({

title: '温馨提示',

content: '输入密码是 = ' + JSON.stringify(this.passwordArr)

})

// 判断是否等于6

if (this.passwordArr.length === 6) {

this.passwordArr = [];

this.AffirmStatus = this.AffirmStatus + 1;

}

// 判断到哪一步了

if (this.AffirmStatus === 1) {

this.oldPasswordArr = this.passwordArr;

} else if (this.AffirmStatus === 2) {

this.newPasswordArr = this.passwordArr;

} else if (this.AffirmStatus === 3) {

this.afPasswordArr = this.passwordArr;

} else if (this.AffirmStatus === 4) {

console.log(this.oldPasswordArr.join(''));

console.log(this.newPasswordArr.join(''));

console.log(this.afPasswordArr.join(''));

uni.showToast({

title: '修改成功',

icon: 'none'

})

setTimeout(() => {

uni.navigateBack();

}, 2000)

}

this.$forceUpdate();

}

}

}

</script>

<style scoped lang="scss">

$base: orangered; // 基础颜色

.page {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

background-color: #FFFFFF;

}

.pay-title {

display: flex;

align-items: center;

justify-content: center;

width: 100%;

height: 200rpx;

text {

font-size: 28rpx;

color: #555555;

}

}

.pay-password {

display: flex;

align-items: center;

width: 90%;

height: 80rpx;

margin: 20rpx auto;

border: 2rpx solid $base;

.list {

display: flex;

align-items: center;

justify-content: center;

width: 16.666%;

height: 100%;

border-right: 2rpx solid #EEEEEE;

text {

font-size: 32rpx;

}

}

.list:nth-child(6) {

border-right: none;

}

}

.hint {

display: flex;

align-items: center;

justify-content: center;

width: 100%;

height: 100rpx;

text {

font-size: 28rpx;

color: $base;

}

}

</style>

```

相关文章:

前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input

前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input&#xff0c; 下载完整代码请访问uni-app插件市场地址&#xff1a;https://ext.dcloud.net.cn/plugin?id13166 效果图如下&#xff1a; # cc-defineKeyboard #### 使用方法 使用方法 <!-- ref:唯一ref pas…...

VB+ACCESS超市管理系统设计(源代码+系统)

超市管理系统是典型的信息管理系统(MIS),其开发主要包括后台数据库的建立和维护以及前端应用程序的开发两个方面。对于前者要求建立起数据一致性和完整性强、数据安全性好的库。而对于后者则要求应用程序功能完备,易使用等特点。经过分析,我们使用 MICROSOFT公司的 VISUAL BASI…...

【机器学习】十大算法之一 “神经网络”

作者主页&#xff1a;爱笑的男孩。的博客_CSDN博客-深度学习,活动,python领域博主爱笑的男孩。擅长深度学习,活动,python,等方面的知识,爱笑的男孩。关注算法,python,计算机视觉,图像处理,深度学习,pytorch,神经网络,opencv领域.https://blog.csdn.net/Code_and516?typeblog个…...

【MarkDown】CSDN Markdown之流程图graphflowchart详解

基本语法 flowchart/graph 流程图&#xff08;Flowcharts/Graphs&#xff09;是由节点 (几何形状) 和连接线 (箭头或线条)组成的. Mermaid代码定义了节点和连线的编码方式&#xff0c;并支持不同的箭头类型、多向箭头以及子图之间的任意链接。 警告 如果在流程图的节点使用e…...

Git下:Git命令使用-详细解读

目录 一、Git 安装 二、Git 配置 三、Git 工作流程 四、Git 工作区、暂存区和版本库 五、常用 Git 命令清单 1. 创建仓库 2. 增加/删除文件 3. 代码提交 4. 分支管理 5. 标签 6. 查看历史提交 7. 远程仓库同步 8. 撤销操作 六、Git 常用命令速查表 七、Git 电子…...

一条SQL语句的前世今生

文章目录 MySQL 基础架构分析语句分析查询语句更新语句 总结 本篇文章会分析下一个 SQL 语句在 MySQL 中的执行流程&#xff0c;包括 SQL 的查询在 MySQL 内部会怎么流转&#xff0c;SQL 语句的更新是怎么完成的。 MySQL 基础架构分析 下图是 MySQL 的一个简要架构图&#xff…...

各种架构比较

架构特点适用领域x86- 市场份额大&#xff0c;广泛支持和应用<br>- 成熟稳定&#xff0c;软件生态丰富<br>- 相对较低的功耗<br>- 适用于桌面、服务器和嵌入式系统等桌面应用、服务器、嵌入式系统x86-64- 支持 64 位操作系统和应用程序<br>- 更大的内存…...

scapy定制数据包探测主机

kali 输入scapy 进入界面 scapy定制ARP协议 输入ARP().display()显示ARP包的详细信息 输入sr1(ARP(pdst"192.168.133.2"))&#xff0c;向网关发送arp请求数据包 scapy定制PING包 输入IP().display()显示IP包的详细信息 输入ICMP().display()显示ICMP包的详细信息…...

【Java】Java核心要点总结70

文章目录 1. volatile 如何保证变量的可⻅性&#xff1f;2. volatile 可以保证原⼦性么&#xff1f;3. synchronized 关键字4. synchronized 和 volatile 的区别5. synchronized 和 ReentrantLock 的区别 1. volatile 如何保证变量的可⻅性&#xff1f; 在Java中&#xff0c;使…...

如何把一个 Git 仓库的分支加入另一个无关的 Git 仓库

文章目录 笔者需要将两个无关的 Git 仓库合并&#xff0c;也就是把一个 Git 仓库的分支加入另一个无关的 Git 仓库。笔者琢磨了一下之后就实现了。方法如下。 笔者的运行环境&#xff1a; git version 2.37.0.windows.1 TortoiseGit 2.11.0.0 IntelliJ IDEA 2023.1.1 (Ultima…...

深蓝学院C++基础与深度解析笔记 第 4 章 表达式

第 4 章 表达式 一、表达式基础 A、表达式: 由一到多个操作数组成&#xff0c;可以求值并 ( 通常会 ) 返回求值结果: #include <iostream> int main(){int x;x 3; }最基本的表达式&#xff1a;变量、字面值通常来说&#xff0c;表达式会包含操作符&#xff08;运算符…...

CLION开发STM32之W5500系列(一)

开篇说明 本系列适用于需要使单片机通过网口进行通信的开发。针对的是刚入门的同学们,也是个人的经验分享。本次使用到的芯片为stm32f103vet6(其他的也可以)本次使用的网口模块为W5500,其网关有示例程序均可以参考.本次使用Clion+OpenOCD+ARM-GCC 进行开发、烧录、编译.建议熟…...

Web3通过ganache运行起一个本地虚拟区块链

通过文章 Web3开发准备工作 手把手带你创建自己的 MetaMask 账号大家简单的对网络 有了个比较模糊的概念 不同的网络连接这不同的区块链 那么 我们就要搞清楚 我们切换不同的网络 我们的数字资产是不一样的 在这里 我们需要先安装一个插件工具 ganache 我们先在本地创建一个文…...

01 背包问题解析与代码 python 实现

01 背包问题解析与代码 问题定义 给定一堆具有不同重量 { w 1 , w 2 , ⋯ , w n } \{ w_1,w_2, \cdots,w_n \} {w1​,w2​,⋯,wn​}与价值 { v 1 , v 2 , ⋯ , v n } \{ v_1,v_2, \cdots,v_n \} {v1​,v2​,⋯,vn​}的背包&#xff08;knapsack&#xff09;&#xff0c;在总重…...

Vue实现前端视频展示列表及特征提取、笔记、删除、文件夹组织功能

Vue实现前端视频展示列表及特征提取、笔记、删除、文件夹组织功能 在前端展示上传的视频列表时&#xff0c;我们可以使用Element-UI中的Card组件来实现。同时&#xff0c;我们还可以添加一些功能&#xff0c;如缓存播放的视频、选择视频文本特征提取处理、写笔记、删除视频、组…...

多传感器时频信号处理:多通道非平稳数据的分析工具(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

数据结构算法 -分而治之算法

引言 坤坤是一个养鸡场的员工&#xff0c;他非常热爱他的工作&#xff0c;并且总是努力提高他的专业技能。有一天&#xff0c;养鸡场接到了一项任务&#xff1a;在短时间内处理一批大量的鸡。 这批鸡数量非常大&#xff0c;比普通的数量要多得多&#xff0c;坤坤意识到他们需…...

涉密信息系统口令管理制度

第一条 口令是涉密信息系统身份认证的基本防护措施&#xff0c;为保障 涉密信息系统的安全运行&#xff0c;规范网络用户及系统口令&#xff0c;特制定本制度。 第二条 具有口令功能的计算机、网络设备等计算机信息系统设 备&#xff0c;必须使用口令对用户的身份进行验证…...

UML与流程图

UML简介 UML&#xff08;Unified Modeling Language&#xff0c;统一建模语言&#xff09;是一种用于软件系统分析与设计的标准化建模语言。它提供了一套丰富的图形符号和规则&#xff0c;可用于描述系统的结构、行为和交互&#xff0c;帮助开发人员、设计师和利益相关者之间进…...

音视频开发Level0: 入门级20~25k的工作

今天给大家分享一个音视频开发领域&#xff0c;入门级别的工作&#xff0c;要求不高。 主要做什么呢&#xff0c;行车记录仪&#xff0c;运动相机&#xff0c;各种拍摄器材包括医疗领域的喉镜啊&#xff0c;等等。 这种产品&#xff0c;招人的公司深圳最多&#xff0c;因为深…...

面试题:Transformer 模型详解——核心创新、编码器解码器结构、位置编码、因果掩码与大模型基础全解析

1. 为什么 Transformer 是面试里的“必问题”&#xff1f;1.1 它不只是一个模型&#xff0c;而是一条技术主线Transformer 的重要性&#xff0c;不在于它只是机器翻译时代的一篇论文&#xff0c;而在于它几乎重塑了后来的 NLP 乃至大模型架构。无论是 BERT 这类理解模型&#x…...

基于微服务与Docker的自动化评测系统Recodex部署与应用指南

1. 项目概述&#xff1a;一个面向教育场景的自动化评测系统 如果你是一名计算机科学或相关专业的教师&#xff0c;或者参与过编程竞赛的组织工作&#xff0c;那么你一定对“收作业”和“判作业”这两件事的繁琐程度深有体会。学生提交的代码文件五花八门&#xff0c;运行环境依…...

英雄联盟智能助手:3分钟上手,让你的游戏体验提升300%

英雄联盟智能助手&#xff1a;3分钟上手&#xff0c;让你的游戏体验提升300% 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 还在为英雄选择犹…...

智能体开发爆发期!程序员现在转型,还能赶上红利吗?

文章目录 前言一、为什么2026年是智能体开发的爆发元年&#xff1f;1.1 市场数据说话&#xff1a;万亿级赛道正在加速形成1.2 企业需求爆发&#xff1a;从"要不要做"到"怎么做"1.3 薪资差距拉大&#xff1a;同样3年经验&#xff0c;薪资差一倍 二、90%程序…...

同态加密加速系统CIPHERMATCH:安全字符串匹配的工程实践

1. 项目概述CIPHERMATCH是一个基于同态加密的安全字符串匹配加速系统&#xff0c;专为隐私保护计算场景设计。在医疗基因组分析、加密数据库搜索等应用中&#xff0c;传统字符串匹配方法需要解密数据后才能执行计算&#xff0c;存在严重的隐私泄露风险。同态加密虽然能解决这一…...

别再被Node版本坑了!手把手教你修改uniCloud云函数的Node.js版本(从8升到12/18)

突破Node.js版本限制&#xff1a;uniCloud云函数升级实战指南 1. 为什么你的云函数在云端运行失败&#xff1f; 许多开发者在使用uniCloud时都遇到过这样的困惑&#xff1a;明明本地测试一切正常&#xff0c;部署到云端却突然报错。最常见的错误信息包括right-hand side of ins…...

FPGA在工业自动化中的核心价值与实现

1. FPGA在工业自动化中的核心价值解析在工业控制领域&#xff0c;实时性和可靠性是系统设计的核心诉求。传统基于MCU或DSP的方案往往面临性能瓶颈&#xff0c;而ASIC方案又缺乏灵活性。FPGA&#xff08;现场可编程门阵列&#xff09;通过其独特的硬件可编程特性&#xff0c;为工…...

Vibe Coding:从环境配置到心流状态,打造高效编程工作流

1. 项目概述&#xff1a;从“氛围感”到“心流”的编程实践指南最近在开发者社区里&#xff0c;一个名为“Vibe Coding Playbook”的项目引起了我的注意。这个项目由 isumitsoni 发起&#xff0c;它不像传统的技术教程那样&#xff0c;一上来就教你如何配置环境、写什么代码&am…...

Claude 3 Opus实测崩坏点曝光:在长上下文推理、多跳代码生成、非英语任务中遭遇的3大性能断层及绕行方案

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Claude 3 Opus性能评测全景概览 Claude 3 Opus 是 Anthropic 推出的旗舰级大语言模型&#xff0c;以卓越的推理深度、长上下文处理&#xff08;200K tokens&#xff09;和多轮对话稳定性著称。在多项权…...

实测Taotoken多模型聚合服务的延迟与稳定性观感分享

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 实测Taotoken多模型聚合服务的延迟与稳定性观感分享 作为需要频繁调用大模型API的开发者&#xff0c;服务的稳定性和可预测性是影响…...