uni-app 自定义支付密码键盘

在这里插入图片描述
1.新建最贱 payKeyboard .vue

<template><view class="page-total" v-show="isShow"><view class="key-list"><view class="list" v-for="(item,index) in keyList" :class="{'special':item.keyCode==190||item.keyCode==8,'payMoney':item.keyCode==88}"@click="onKeyList(item,index)":key="item.keyCode"><text>{{item.key}}</text></view></view></view>
</template><script>export default {data() {return {isShow: false,keyList: [{key: 1,en: '',keyCode: 49,},{key: 2,en: 'ABC',keyCode: 50,},{key: 3,en: 'ABC',keyCode: 51,},{key: 4,en: 'ABC',keyCode: 52,},{key: 5,en: 'ABC',keyCode: 53,},{key: 6,en: 'ABC',keyCode: 54,},{key: 7,en: 'ABC',keyCode: 55,},{key: 8,en: 'ABC',keyCode: 56,},{key: '删除',en: 'Del',keyCode: 8,},{key: 9,en: 'ABC',keyCode: 57,},{key: 0,en: 'ABC',keyCode: 48,},{key: '确定',en: 'Pay',keyCode: 88,},],keyIndex: -1,};},props:{passwrdType: {type: String,default: 'pay'}},methods:{show(){this.isShow = true;},hide(){this.isShow = false;},/*** 密码键盘按下* @param {Object} item* @param {Number} index*/onKeyList(item,index){let KeyInfo = item;	// 删除键if(KeyInfo.keyCode === 8 && this.keyIndex > -1){this.keyIndex--;}// 不是删除键if(KeyInfo.keyCode != 8){if(this.passwrdType == 'pay' && this.keyIndex >= 5){console.log('键盘');this.keyIndex = -1;return;}else{this.keyIndex = -1;}this.keyIndex++;}KeyInfo.index = this.keyIndex;this.$emit('KeyInfo',KeyInfo);}}}
</script><style scoped lang="scss">@import 'cc-payKeyboard.scss';
</style>

2.引用
<PayKeyboard ref=“codeKeyboard” passwrdType=“pay” @KeyInfo=“KeyInfo”>

import PayKeyboard  from "@/components/payKeyboard.vue"<view>
<view>
<text v-show="AffirmStatus === 1">请设置6位支付密码</text>
<text v-show="AffirmStatus >= 2">请确认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>const codeKeyboard = ref(null)const passwordArr = ref([])const newPasswordArr = ref("")const AffirmStatus = ref("")const passwordArr = ref([])
//支付密码function onPayUp() {codeKeyboard.value.show();}/*** 支付键盘回调* @param {Object} val*/function KeyInfo(val) {if (val.index >= 6) {return;}// 判断是否输入的是删除键if (val.keyCode === 8) {// 删除最后一位passwordArr.value.splice(val.index + 1, 1)}// 判断是否输入的是.else if (val.keyCode == 190) {// 输入.无效} else {if(passwordArr.value.length<=6){passwordArr.value.push(val.key);}}if (val.keyCode == 88) {let pass = parseInt(passwordArr.value.join(""));console.log(pass)}// 判断是否等于6if (this.passwordArr.length === 6) {if (AffirmStatus.value === 1) {setTimeout(() => {passwordArr.value = [];AffirmStatus.value = AffirmStatus.value + 1;codeKeyboard..value.hide()}, 500)}}// 判断到哪一步了if (AffirmStatus.value === 1) {oldPasswordArr.value = parseInt(passwordArr.value.join(""));} else if (AffirmStatus.value >= 2) {afPasswordArr.value = parseInt(passwordArr.value.join(""));if (this.passwordArr.length === 6) {}}this.$forceUpdate();}

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

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

相关文章

LeetCode 53.最大子数组和(dp)

给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 示例 1&#xff1a; 输入&#xff1a;nums [-2,1,-3,4,-1,2,1,-5,4] 输出&#xff1a;…

《雁门太守行》

作者 李贺 【唐代】 全文&#xff1a; 黑云压城城欲摧&#xff0c;甲光向日金鳞开。 角声满天秋色里&#xff0c;塞上燕脂凝夜紫。 半卷红旗临易水&#xff0c;霜重鼓寒声不起。 报君黄金台上意&#xff0c;提携玉龙为君死。 提示&#xff1a; (塞上 一作&#xff1a;塞土) …

描述ifstream、ofstream和fstream类的用途

ifstream、ofstream和fstream是C标准库<fstream>中提供的三个重要的文件流类&#xff0c;它们分别用于文件的读取、写入和读写操作。以下是这三个类的详细用途描述&#xff1a; ifstream类&#xff08;输入文件流类&#xff09;&#xff1a; 用途&#xff1a;ifstream类…

JavaScript:实现内容显示隐藏(展开收起)功能

一、场景 点击按钮将部分内容隐藏&#xff08;收起&#xff09;&#xff0c;再点击按钮时将内容显示&#xff08;展开&#xff09;出来。 二、技术摘要 js实现实现内容显示隐藏js动态给ul标签添加li标签js遍历数组 三、效果图 四、代码 js_block_none.js代码 var group1 doc…

网工内推 | 网络工程师,IE认证优先,最高18k*14薪,周末双休

01 上海吾索信息科技有限公司 &#x1f537;招聘岗位&#xff1a;网络工程师 &#x1f537;岗位职责&#xff1a; 1&#xff09;具备网络系统运维服务经验以及数据库实施经验&#xff0c;具备网络系统认证相关资质或证书&#xff1b; 2&#xff09;掌握常用各设备的运维巡检…

GESP 四级急救包(3):押题急救

常见算法攻克 一、素数1. 素数判断2. 素数筛法 二、数据转换1. 字符串转换2. 进制转换2.1 将 x x x 进制转换为 10 10 10 进制2.2 将 10 10 10 进制转换为 x x x 进制 三、字符串1. 字符串替换2. 其他题目 一、素数 1. 素数判断 bool isPrime(int n) {if (n < 2) retu…

Java---Maven详解

一段新的启程&#xff0c; 披荆斩棘而前&#xff0c; 心中的梦想&#xff0c; 照亮每个黑暗的瞬间。 无论风雨多大&#xff0c; 我们都将坚强&#xff0c; 因为希望的火焰&#xff0c; 在胸中永不熄灭。 成功不是终点&#xff0c; 而是每一步的脚印&#xff0c; 用汗水浇灌&…

uni-appx使用form表单页面初始化报错

因为UniFormSubmitEvent的类型时 e-->detail-->value,然后没有了具体值。所以页面初始化的时候 不能直接从value取值&#xff0c;会报错找不到 所以form表单里的数据我们要设置成一个对象来存放 这个问题的关键在于第22行代码 取值&#xff1a; 不能按照点的方式取值 …

java23种设计模式之策略模式

概述 策略模式是23种设计模式之一&#xff0c;也是工作中出现频率比较高的设计模式之一&#xff0c;策略模式主要是为了针对不通业务场景做出不同行为的一种设计模式。该模式一般可以直接替换多个if eles 的场景。策略模式主要分为三个部分&#xff0c;策略接口&#xff0c;具体…

[数据集][目标检测]棉花叶子害虫检测数据集VOC+YOLO格式595张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;595 标注数量(xml文件个数)&#xff1a;595 标注数量(txt文件个数)&#xff1a;595 标注类别…

找不到xinput1_3.dll怎么办,实测有效的几种方法分享

在日的使用电脑过程中&#xff0c;我们经常会遇到各种各样的问题。其中之一就是找不到xinput1_3.dll文件。这个问题可能会影响到我们的游戏体验&#xff0c;甚至导致电脑无法正常运行。那么&#xff0c;又该如何解决这个问题呢&#xff1f;小编将全面解析找不到xinput1_3.dll对…

老无忧,成熟人士都在玩的社交app

随着互联网向不同年龄群体的进一步渗透&#xff0c;越来越多大龄人士逐步在传统以年轻人为主的平台中搭建起自己的空间&#xff0c;对缔结社交关系的需求也变得强烈起来。老无忧无忧交友app应运而生&#xff0c;于2024年6月1日正式上线&#xff08;以下简称“老无忧”&#xff…

深入解析npm install --save-dev:开发依赖管理的艺术

npm&#xff08;Node Package Manager&#xff09;是JavaScript编程语言的包管理器&#xff0c;用于管理项目中的依赖关系。在开发过程中&#xff0c;合理地管理依赖是保证项目可维护性和可扩展性的关键。npm install命令是npm中最常用的命令之一&#xff0c;而--save-dev参数则…

基于Java仓储出入库管理系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f;感兴趣的可以先收藏起来&#xff0c;还…

GPU算力是什么,哪些行业需要用到GPU算力?

近两年&#xff0c;计算能力已成为推动各行各业发展的关键因素。而GPU&#xff08;图形处理器&#xff09;算力&#xff0c;作为现代计算技术的重要分支&#xff0c;正逐渐在多个领域展现出其强大的潜力和价值。尚云将简要介绍GPU算力的定义和基本原理&#xff0c;并探讨其在哪…

CSS盒子模型:深入理解网页布局的基石

在网页设计和开发中&#xff0c;CSS盒子模型是构建布局的基础。它决定了元素在页面上的显示方式&#xff0c;包括元素的大小、间距以及它们如何相互交互。本文将详细介绍CSS盒子模型的各个方面&#xff0c;包括内容区、内边距、边框、外边距以及它们在实际布局中的应用。 盒子…

使用minio搭建oss

文章目录 1.minio安装1.拉取镜像2.启动容器3.开启端口1.9090端口2.9000端口 4.访问1.网址http://:9090/ 5.创建一个桶 2.minio文件服务基本环境搭建1.创建一个文件模块2.目录结构3.配置依赖3.application.yml 配置4.编写配置类MinioConfig.java&#xff0c;构建minioClient5.Fi…

Verilog进行结构描述(四):Verilog逻辑强度(strength)模型

目录 1.Verilog提供多级逻辑强度。2.基本单元强度说明语法3.信号强度值系统4.Verilog多种强度决断 微信公众号获取更多FPGA相关源码&#xff1a; 1.Verilog提供多级逻辑强度。 逻辑强度模型决定信号组合值是可知还是未知的&#xff0c;以更精确的描述硬件的行为。下面这些情…

web自动化(二)元素定位 xpath定位css定位

常用的元素定位&#xff1a;ID&#xff0c;Name,xpath,css 等等 selenuim demo import timefrom selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.wait import WebDriverWait from selenium.webdriver.support imp…

数学建模---最小生成树问题的建模~~~~~Matlab代码

目录 1.相关概念 &#xff08;1&#xff09;什么是树 &#xff08;2&#xff09;生成树和最小生成树&#xff1a; 2.适用赛题 &#xff08;1&#xff09;赛题分类 &#xff08;2&#xff09;不同之处 3.两种算法 &#xff08;1&#xff09;prim算法 &#xff08;2&…