当前位置: 首页 > 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;因为深…...

从555到正弦波:手把手教你用立创EDA仿真+打样一个2KHz波形发生器(附完整工程)

从555到正弦波&#xff1a;立创EDA全流程打造2KHz波形发生器实战指南 在电子设计领域&#xff0c;波形发生器是最基础却又最考验设计功底的经典项目之一。想象一下&#xff0c;当你亲手设计的电路板输出完美的正弦波时&#xff0c;那种成就感绝非购买现成模块可比。本文将带你用…...

MAA明日方舟自动化助手:5分钟快速上手指南

MAA明日方舟自动化助手&#xff1a;5分钟快速上手指南 【免费下载链接】MaaAssistantArknights 一款明日方舟游戏小助手 项目地址: https://gitcode.com/GitHub_Trending/ma/MaaAssistantArknights MAA&#xff08;MaaAssistantArknights&#xff09;是一款专为《明日方…...

STM32F103C8T6 HAL库驱动HC-SR04:用输入捕获双通道模式,精准测距不翻车

STM32F103C8T6 HAL库双通道捕获HC-SR04&#xff1a;高精度测距的工程实践 在智能小车避障、工业液位检测等嵌入式应用中&#xff0c;超声波测距模块的稳定性直接决定系统可靠性。传统单通道捕获方案常因计数器溢出、中断响应延迟等问题导致测量误差&#xff0c;而双通道输入捕获…...

VBench评测基准全面解析:如何精准评估视频生成模型性能

1. VBench评测基准&#xff1a;视频生成模型的"体检中心" 想象一下你去医院做全身体检&#xff0c;医生会用不同仪器检查你的视力、听力、心肺功能等各项指标。VBench就是给视频生成模型做全面体检的"三甲医院"&#xff0c;它能从16个维度给模型打分&#…...

【ComfyUI】Qwen-Image-Edit-F2P 环境配置全攻略:Anaconda创建独立Python环境

ComfyUI Qwen-Image-Edit-F2P 环境配置全攻略&#xff1a;Anaconda创建独立Python环境 你是不是也遇到过这种情况&#xff1a;好不容易找到一个好用的AI图像编辑模型&#xff0c;比如Qwen-Image-Edit-F2P&#xff0c;兴冲冲地准备在ComfyUI里跑起来&#xff0c;结果第一步安装…...

终极指南:如何在Foobar2000中安装和配置ESLyric逐字歌词源

终极指南&#xff1a;如何在Foobar2000中安装和配置ESLyric逐字歌词源 【免费下载链接】ESLyric-LyricsSource Advanced lyrics source for ESLyric in foobar2000 项目地址: https://gitcode.com/gh_mirrors/es/ESLyric-LyricsSource 想要在Foobar2000中享受精准的逐字…...

macOS风格光标主题:从视觉革新到交互未来的全面探索

macOS风格光标主题&#xff1a;从视觉革新到交互未来的全面探索 【免费下载链接】apple_cursor Free & Open source macOS Cursors. 项目地址: https://gitcode.com/gh_mirrors/ap/apple_cursor 价值解析&#xff1a;重新定义数字交互的视觉语言 在当今多设备协同的…...

【数电】组合逻辑电路模块:从原理到系统级应用

1. 组合逻辑电路基础入门 第一次接触数字电路时&#xff0c;我被那些密密麻麻的逻辑门符号搞得头晕眼花。直到真正理解了组合逻辑电路的精髓&#xff0c;才发现它就像搭积木一样有趣。组合逻辑电路的特点是输出只取决于当前的输入状态&#xff0c;不像时序电路那样需要考虑历史…...

Llama-3.2V-11B-cot高效部署:双卡4090下11B模型加载时间缩短至92s

Llama-3.2V-11B-cot高效部署&#xff1a;双卡4090下11B模型加载时间缩短至92s 1. 项目概述 Llama-3.2V-11B-cot是基于Meta Llama-3.2V-11B-cot多模态大模型开发的高性能视觉推理工具。该工具针对双卡RTX 4090环境进行了深度优化&#xff0c;通过一系列技术创新将11B大模型的加…...

告别繁琐配置:用快马ai一键生成win10系统openclaw自动化安装脚本原型

最近在折腾一个自动化安装OpenClaw工具的项目&#xff0c;发现Windows 10下的环境配置特别麻烦。作为一个经常需要快速验证工具链的开发者&#xff0c;我摸索出了一套用InsCode(快马)平台快速生成原型的方法&#xff0c;分享给大家。 环境检测模块的实现 最头疼的就是处理不同用…...