微信密码输入框功能效果实现（vue）

最新推荐文章于 2024-05-31 07:17:54 发布
最新推荐文章于 2024-05-31 07:17:54 发布
阅读量1.1k 收藏 3
点赞数 3
分类专栏： JavaScript Vue HTML + CSS 文章标签： 微信密码输入框 6位数字密码输入 密码输入框 模拟密码输入框 H5密码输入框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Joy_qxz/article/details/85281682
版权
Vue 同时被 3 个专栏收录
7 篇文章 0 订阅
订阅专栏
JavaScript
4 篇文章 0 订阅
订阅专栏
HTML + CSS
1 篇文章 0 订阅
订阅专栏

效果图如下：

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <link rel="stylesheet" type="text/css" href="./index.css">
    <title>密码验证</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div class="mypopup">
        <div class="content">
            <div class="close_btn" @click="closePop">X</div>
            <div class="main">
                <h3>请输入支付密码验证</h3>
                <p class="tip">密码错误，还可输入4次</p>
                <div class="pwipt">
                    <input type="password" @input="judgePassword" v-model="password" autofocus maxlength='6'>
                    <div class="border-right">
                        <span v-if="show1"></span>
                    </div>
                    <div class="border-right">
                        <span v-if="show2"></span>
                    </div>
                    <div class="border-right">
                        <span v-if="show3"></span>
                    </div>
                    <div class="border-right">
                        <span v-if="show4"></span>
                    </div>
                    <div class="border-right">
                        <span v-if="show5"></span>
                    </div>
                    <div>
                        <span v-if="show6"></span>
                    </div>
                </div>
                <div class="forgetpw">忘记密码？</div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
<script type="text/javascript" src="./index.js"></script>
</html>

css代码：

* {
    margin: 0;
    padding: 0;
}
.mypopup {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.mypopup .content {
    position: relative;
    background: #fff;
    width: 75%;
    border-radius: 10px;
}
.mypopup .content .main {
    padding: 40px 30px;
    font-size: 12px;
    text-align: center;
}
.mypopup .content .main h3 {
    font-size: 18px;
    line-height: 2em;
    font-weight: 700;
}
.mypopup .content .main .tip {
    color: #EE4A4A;
    margin-bottom: 10px;
}
.mypopup .content .main .pwipt {
    font-size: 0;
    height: 45px;
    line-height: 45px;
    width: 220px;
    border: 1px solid #ccc;
}
.mypopup .content .main .pwipt div {
    display: inline-block;
    width: 16.2%;
    height: 45px;
    position: relative;
}
.mypopup .content .main .pwipt .border-right {
    border-right: 1px solid #ccc;
}
.mypopup .content .main .pwipt div>span {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    margin-top: -5px;
    margin-left: -5px;
}
.mypopup .content .main .pwipt input {
    outline: none;
    border: 0;
    background: none;
    width: 900px;
    height: 0;
    padding: 22px 0;
    text-align: center;
    position: absolute;
    left: -500px;
    right: 0;
    z-index: 1000;
    color:transparent;
    text-indent: -999em;
}
.mypopup .content .close_btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 14px;
    height: 14px;
    z-index: 1000;
}
.forgetpw {
    font-size: 14px;
    color: #008AFF;
    margin-top: 10px;
    text-align: right;
}

js代码：

var vm = new Vue({
    el: '#app',
    data: {
        password: '',
        autofocus: true,
        show1: false,
        show2: false,
        show3: false,
        show4: false,
        show5: false,
        show6: false,
    },
    mounted: function () {

    },
    methods: {
        //关闭密码输入清空输入
        closePop: function() {
            this.password = '';
            this.judgePassword();
        },
        //校验密码
        surePassword: function() {
            // 调用密码校验接口

        },
        // 密码输入样式
        judgePassword: function() {
            if(this.password.length == 0) {
                this.show1 = false;this.show2 = false;this.show3 = false;this.show4 = false;this.show5 = false;this.show6 = false;
            }
            if(this.password.length == 1) {
                this.show1 = true;this.show2 = false;this.show3 = false;this.show4 = false;this.show5 = false;this.show6 = false;
            }
            if(this.password.length == 2) {
                this.show1 = true;this.show2 = true;this.show3 = false;this.show4 = false;this.show5 = false;this.show6 = false;
            }
            if(this.password.length == 3) {
                this.show1 = true;this.show2 = true;this.show3 = true;this.show4 = false;this.show5 = false;this.show6 = false;
            }
            if(this.password.length == 4) {
                this.show1 = true;this.show2 = true;this.show3 = true;this.show4 = true;this.show5 = false;this.show6 = false;
            }
            if(this.password.length == 5) {
                this.show1 = true;this.show2 = true;this.show3 = true;this.show4 = true;this.show5 = true;this.show6 = false;
            }
            if(this.password.length == 6) {
                this.show1 = true;this.show2 = true;this.show3 = true;this.show4 = true;this.show5 = true;this.show6 = true;
                // 接口校验密码
                this.surePassword();
            }
        },
    }
});

 

二进制旅者
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue 匹配键盘输入_vue实现键盘输入支付密码功能
weixin_42552410的博客
01-13 261
摘要：这篇Vue栏目下的“vue实现键盘输入支付密码功能”，介绍的技术点是“键盘输入、Vue、功能、支付、输入、实现”，希望对大家开发技术学习和问题解决有帮助。本文实例为大家分享了vue实现键盘输入支付密码功能的具体代码，供大家参考，具体内容如下支付密码功能界面如下图：主要代码如下：请输入交易密码忘记密码？{{ val }}<const keys = () => [1, 2, 3, 4...
vue实现一款支付虚拟键盘组件
03-28
使用vue.js实现的一款虚拟键盘组件, 支持实时回调密码, 可根据需要更改样式
vue实现键盘输入支付密码功能
10-18
主要为大家详细介绍了vue实现键盘输入支付密码功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前端Vue自定义支付密码输入框键盘与设置弹框组件的设计与实现
最新发布
chenchuang0128的博客
05-31 708
通过组件化开发，我们成功实现了前端Vue自定义支付密码输入框键盘和支付密码设置弹框组件。同时，组件化开发的思想也为我们提供了一种灵活、可扩展的开发方式，使得前端应用更加健壮和可维护。本文将介绍两个重要的组件：自定义支付密码输入框键盘（Keyboard）和支付密码设置弹框（Dialog）组件。这两个组件的设计和实现，将展示组件化开发在前端框架Vue中的实际应用。弹框显示时，用户可以进行密码输入和确认操作，同时弹框提供了必要的提示信息和操作按钮，以引导用户完成密码设置流程。该组件的设计遵循简洁、易用的原则。
vue实现支付密码设置 获取验证码效果
措手不及ya的博客
02-08 390
vue实现支付密码设置 获取验证码效果
vue实现输入六位密码支付页面
weixin_48148948的博客
10-13 1004
支付页面如下 点击确认支付，弹出输入密码框 通过键盘输入密码 如果点击取消则返回显示支付页面 如果点击确定则在控制台输出输入密码(根据需要进行修改) 具体实现代码如下 注意：代码中按钮用了mui库、CSS样式用到了SCSS插件，请自行修改 <template> <div :class="{all:showBol}"> <br> <br><br><br> <div class=...
仿支付宝/微信的密码输入框效果
08-09
"仿支付宝/微信的密码输入框效果"是一个专为Android平台设计的项目，它旨在模仿支付宝和微信应用中的密码输入体验，提供一种既美观又安全的用户界面。这个项目包含了两个版本，一个适用于Eclipse开发环境，另一个...
vue项目移动端实现ip输入框问题
12-11
vue框架移动端做ip输入框组件，input在浏览器和微信端兼容问题。 要求：只能输入数字，输入数字以外的字符（包括点、冒号等数字符号）时自动跳到下一段ip输入框. type=number类型，不会禁止点的输入。手动过滤拿不...
Vue 表情包输入组件的实现代码
12-08
index是使用示例，emotion是组件代码（这里用的是微信表情包的地址，大家可根据需要修改） 下载安装启动项目查看效果 npm install npm run dev Emotion文件夹下Emotion文件说明 实现原理是根据字段对在线表情包...
Vue.js仿微信聊天窗口展示组件功能
12-09
源码：https://github.com/doterlin/vue-wxChat 演示地址：https://doterlin.github.io/vue-wxChat/ 运行 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build ...
Vue表情输入组件 微信face表情组件
10-17
主要为大家详细介绍了Vue表情输入组件，微信face表情组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现6位支付密码
08-10
借助vue-cli和vue的插件功能，实现六位密码插件，主要服务于pc站点
前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input
chenchuang0128的博客
06-23 1889
### 使用方法```使用方法-- ref:唯一ref passwrdType：密码样式pay keyInfo：密码输入监测事件 -->/** * 唤起键盘 */},/*** 支付键盘回调* @param {Object} val */return;// 判断是否输入的是删除键// 删除最后一位// 判断是否输入的是.// 输入.无效} else {title: '温馨提示',
Vue版支付密码（类似支付宝）
weixin_45543192的博客
10-25 1041
支付密码Vue版支付密码代码效果展示HTMLJavascriptCSS Vue版支付密码代码 效果展示 HTML <div class="spend-pay-1"> <div class="spend-pay-2">支付密码</div> <!-- 支付框 --> <div class='am_payPwd' :id=...
vue输入支付密码调起键盘功能
baidu_41601299的博客
10-30 869
<template> <div class="pay-tool"> <div class="pay-tool-title border-bottom"> <span class="icon icon-back" @click="backHandle"></span><strong>请输入交易密码&lt...
vue下实现类似输入支付密码的效果，不依赖任何插件
wzzehui的博客
07-23 3405
&lt;template&gt; &lt;div class="wrapper"&gt; &lt;div class="wrapper-input"&gt; &lt;h3&gt;请输入12位奖品兑换码&lt;/h3&gt; &lt;ul&gt; &lt;li&gt;
vue 模拟支付宝六位密码支付，直接上代码
lizhen_software的博客
02-27 6541
&lt;template&gt; &lt;div class="pwdpush-box"&gt; &lt;h4 class="enter-password" @click="enterPwd"&gt;输入密码&lt;/h4&gt; &lt;div class="phonenum-show" :class="pushShow?'
vue2+uniapp前端如何实现类似微信支付时那样六位数密码输入框？
05-19
可以使用第三方插件 `uni-passcode` 来实现类似微信支付时的六位数密码输入框。 首先需要在 `uni-app` 项目中安装 `uni-passcode` 插件： ```bash npm install uni-passcode --save ``` 然后在需要使用六位数密码输入框的页面中引入插件，并注册组件： ```vue <template> <view class="container"> <uni-passcode :codeLength="6" @success="onSuccess" /> </view> </template> <script> import UniPasscode from 'uni-passcode'; export default { components: { UniPasscode }, methods: { onSuccess(code) { console.log('密码为：', code); } } } </script> ``` 在上面的代码中，通过 `<uni-passcode>` 标签引入密码输入框，并指定 `codeLength` 属性为 `6`，表示需要输入六位数密码。当用户输入完成后，会触发 `success` 事件，调用 `onSuccess` 方法，将用户输入的密码值输出到控制台中。 注意：`uni-passcode` 插件不支持在 `H5` 环境下使用，只能在 `App` 或 `小程序` 中使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值