从网上搜索了好多都很麻烦,花了点事件自己做了个,简单轻便,老少皆宜

<template>
<section class="pay-mask" @click="close_mask" v-show="payshow">
<div class="container">
<div class="pay_title">请输入支付密码
</div>
<div class="flex f-d-r pay_content">
<div class="ipt_pay">
<input type="password" maxlength="1" disabled>
</div>
<div class="ipt_pay">
<input type="password" maxlength="1" disabled>
</div>
<div class="ipt_pay">
<input type="password" maxlength="1" disabled>
</div>
<div class="ipt_pay">
<input type="password" maxlength="1" disabled>
</div>
<div class="ipt_pay">
<input type="password" maxlength="1" disabled>
</div>
<div class="ipt_pay">
<input type="password" maxlength="1" disabled>
</div>
</div>
</div>
<footer>
<ul class="pay_btn">
<li @click="btnpassword($event)">1</li>
<li @click="btnpassword($event)">2</li>
<li @click="btnpassword($event)">3</li>
<li @click="btnpassword($event)">4</li>
<li @click="btnpassword($event)">5</li>
<li @click="btnpassword($event)">6</li>
<li @click="btnpassword($event)">7</li>
<li @click="btnpassword($event)">8</li>
<li @click="btnpassword($event)">9</li>
<li class="b9"></li>
<li @click="btnpassword($event)">0</li>
<li class="b9" @click="btndelete">删除</li>
</ul>
</footer>
</section>
</template>
<script>
export default {
props: {
payshow: {
type: Boolean,
default: false
}
},
data() {
return {
index: -1
}
},
created() {},
mounted() {
$(".ipt_pay input:first").focus();
},
methods: {
btnpassword(e) {
var obj = e.currentTarget;
var payinput = $(".ipt_pay input");
if (this.index < 5) {
this.index++;
$(payinput[this.index]).val($(obj).text());
}
if (this.index == 5) {
var pay_pwd = '';
var payinput = $(".ipt_pay input");
for (var i = 0; i < payinput.length; i++) {
pay_pwd += $(payinput[i]).val();
}
console.log(pay_pwd);
}
},
btndelete() {
var payinput = $(".ipt_pay input");
if (this.index >= 0) {
$(payinput[this.index]).val('');
this.index--;
}
},
close_mask() {
this.payshow = false;
}
}
}
</script>
<style scoped>
img {
width: 100%;
height: 100%;
}
section {
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 998;
background: rgba(0, 0, 0, .6)
}
.container {
position: absolute;
top: 4rem;
background: #fff;
border-radius: 5px;
margin: 0 .533333rem;
padding-bottom: .266667rem;
}
.pay_title {
position: relative;
font-size: .48rem;
text-align: center;
color: #333;
height: 1.333333rem;
line-height: 1.333333rem;
border-bottom: 1px solid #ddd;
}
.close {
position: absolute;
right: .2rem;
top: .2rem;
width: .72rem;
height: .72rem;
}
.pay_content {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
margin: .533333rem .533333rem .333333rem .533333rem;
}
.ipt_pay {
width: 100%;
height: 1.333333rem;
border-left: 1px solid #ddd;
}
.ipt_pay input {
border: 0;
height: 100%;
width: 100%;
text-align: center;
font-size: .88rem;
background: #fff;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
font-weight: 600;
}
.pay_btn {}
.pay_btn li {
width: 33.3333%;
float: left;
height: 1.333333rem;
line-height: 1.333333rem;
text-align: center;
background: #fff;
font-size: .48rem;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.pay_btn li:active {
background: #C2C2C2;
}
.b9:active {
background: #fff !important;
}
.b9 {
background: #C2C2C2 !important;
}
</style>

vue支付密码的更多相关文章

  1. Android 高仿微信支付密码输入控件

    像微信支付密码控件,在app中是一个多么司空见惯的功能.最近,项目需要这个功能,于是乎就实现这个功能. 老样子,投篮需要找准角度,变成需要理清思路.对于这个"小而美"的控件,我们思 ...

  2. 移动端键盘密码输入框插件(jquery用于支付密码)

    最后生成样子: 配置值: * back {function} 回调函数 * msghtml {html} 自定义的html * title {string|object} 标题 * {txt:标题,b ...

  3. 微信小程序之支付密码输入demo

    在小程序中实现支付密码的输入,要解决几个问题: 1.小程序要想唤起键盘,必须要借助input控件.通过input控件和其属性focus来唤起和隐藏输入键盘. 2.要让input控件不可见.让光标和输入 ...

  4. js模拟输入支付密码

    html <div class="content"> <!--<div class="title">支付宝支付密码:</di ...

  5. vue,一路走来(14)--短信验证码框的实现(类似支付密码框)

    由于项目的扩展,新增了很多功能,今天谈一下短信验证码框的实现. 思路:每个小方框其实就是单独的每一个input标签(叫假input标签),每个长度为1,然后上面再写一个大的input标签(叫真实inp ...

  6. vue确认密码

    rules: { pwd:[{ required:true, message:'创建密码',trigger:'blur' }], cpwd:[{ required:true,message:'确认密码 ...

  7. vue记住密码功能

    话不多说,直接上代码. html部分: <el-form :model="ruleForm2" :rules="rules2" ref="rul ...

  8. 支付宝cookie 是支付密码 不是登录密码

    开发文档/ 手机网站支付 / 产品介绍 开放平台文档中心 https://docs.open.alipay.com/203/105288

  9. Vue — 微信公众号内置h5支付相关

    首先,在公众号后台配置h5页面地址 开发流程 1.通过配置h5地址,获取code.再通过code,获取openid getOpenid(){ let url = 'https://open.weixi ...

随机推荐

  1. 【洛谷P3909】异或之积

    题目大意:给定一个 N 个数字组成的序列,求 \[ \left(6 \times \sum_{i=1}^{N} \sum_{j=i+1}^{N} \sum_{k=j+1}^{N} A_{i} \tim ...

  2. EndNote登陆Web账号时解决不断询问用户名密码

    EndNote登陆Web账号时不断询问用户名密码怎么破?EndNote有个同步功能,在登陆Web账号时,EndNote不断的询问账号和密码,可是用户名和密码明明已经填写正确和完毕,就是登陆不上EndN ...

  3. python全栈开发_day8_文件的多种读写方式及游标

    一:文件的多种读写方式 主方式:w    r    a 从方式:t     b    + 了解方式:x    u 1)按t(按照字符进行操作): with open("data_1.txt& ...

  4. js定时器执行

    第一种:问题请求代表执行打印出来的是什么? //定时器执行页面崩溃 var bo = true; setTimeout(function () { console.log("定时器执行&qu ...

  5. Nginx unknown directive ""

    原因:由于使用记事本编辑了nginx.conf. 解决方案:参考https://www.jianshu.com/p/2516ec8bae72

  6. Python处理文件和查漏

    import os,re def change_filename(root): ''' 批量修改excel文件名 ''' for root_,_, fs in os.walk(root): for f ...

  7. CSAPP阅读笔记-栈帧-来自第三章3.7的笔记-P164-P176

    1.基本结构: 如上图所示,是通用的栈帧结构.大致分两块,调用者函数P和被调用者函数Q. 对P来说,要做的工作是把传递参数中多于6个的部分压栈,随后把Q返回时要执行的下一条指令的地址压栈. 对Q来说, ...

  8. 750的设计图以rem为单位的移动设备响应的设置大小

    750的设计图,设置font-size: 125%;  1rem =20px;  大部分浏览器默认的字体大小为16px,谷歌默认字体大小为12px; 其他设备的fon-size的比列: 320/720 ...

  9. 看一段Delphi导出到Word的源代码

    procedure TFrmWeekAnalysisQry.BtnExportToExcelClick(Sender: TObject);var wordApp,WordDoc,WrdSelectio ...

  10. selenium IDE 命令 一

    Actions 描述了用户所会作出的操作.Action 有两种形式: action和actionAndWait, action会立即执行,而actionAndWait会假设需要较长时间才能得到该act ...