从网上搜索了好多都很麻烦,花了点事件自己做了个,简单轻便,老少皆宜
<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>
- Android 高仿微信支付密码输入控件
像微信支付密码控件,在app中是一个多么司空见惯的功能.最近,项目需要这个功能,于是乎就实现这个功能. 老样子,投篮需要找准角度,变成需要理清思路.对于这个"小而美"的控件,我们思 ...
- 移动端键盘密码输入框插件(jquery用于支付密码)
最后生成样子: 配置值: * back {function} 回调函数 * msghtml {html} 自定义的html * title {string|object} 标题 * {txt:标题,b ...
- 微信小程序之支付密码输入demo
在小程序中实现支付密码的输入,要解决几个问题: 1.小程序要想唤起键盘,必须要借助input控件.通过input控件和其属性focus来唤起和隐藏输入键盘. 2.要让input控件不可见.让光标和输入 ...
- js模拟输入支付密码
html <div class="content"> <!--<div class="title">支付宝支付密码:</di ...
- vue,一路走来(14)--短信验证码框的实现(类似支付密码框)
由于项目的扩展,新增了很多功能,今天谈一下短信验证码框的实现. 思路:每个小方框其实就是单独的每一个input标签(叫假input标签),每个长度为1,然后上面再写一个大的input标签(叫真实inp ...
- vue确认密码
rules: { pwd:[{ required:true, message:'创建密码',trigger:'blur' }], cpwd:[{ required:true,message:'确认密码 ...
- vue记住密码功能
话不多说,直接上代码. html部分: <el-form :model="ruleForm2" :rules="rules2" ref="rul ...
- 支付宝cookie 是支付密码 不是登录密码
开发文档/ 手机网站支付 / 产品介绍 开放平台文档中心 https://docs.open.alipay.com/203/105288
- Vue — 微信公众号内置h5支付相关
首先,在公众号后台配置h5页面地址 开发流程 1.通过配置h5地址,获取code.再通过code,获取openid getOpenid(){ let url = 'https://open.weixi ...
随机推荐
- 数组其他部分及java常见排序
数据结构的基本概述: 数据结构是讲什么,其实大概就分为两点: 1.数据与数据之间的逻辑关系:集合.一对一.一对多.多对多 2.数据的存储结构: 一对一的:线性表:顺序表(比如:数组).链表.栈(先进后 ...
- java中引用
java中引用分为,强,弱,虚,软 (1)强引用 使用最普遍的引用.如果一个对象具有强引用,它绝对不会被gc回收.如果内存空间不足了,gc宁愿抛出OutOfMemoryError,也不是会回收具有强引 ...
- mysql里面 limit的奇效
项目里面有遇到一个需求,查询一个表,先group by ,再按group 的count(*)进行倒序,取出每个group里面发表时间最新的一个纪录,之前的同事SQL是这样写的 SELECT * FRO ...
- Codeforces Round #545 (Div. 2) 题解
题目链接 A. Sushi for Two 题意 在一个 01 序列中找出长为偶数的连续的一段使得它前一半和后一半内部分别相同,而前一半和后一半不同. \(2\le n\le 100\ 000\) 题 ...
- centos 7 设置开机启动服务
2018-12-25 Centos7下添加开机自启动脚本和服务的方法 以docker 服务为例 1.centos7自带命令设置 systemctl enable docker.service 2.设置 ...
- 关于dedecms数据量大以后生成目录缓慢的问题解决
四月份的时候博客被封.我不知情.因为一直很忙,没有来得及看.前两天来看以后,发现居然被封,吓傻了我. 赶紧找原因,原来是转载了某个人的博文,被他举报了,然后就被封了. 觉得很伤心,毕竟这个博客陪伴了我 ...
- java 接口的学习
1 什么是接口 接口是一种引用数据类型.使用interface声明接口,形式: public interface 接口名称{} 1.1.1 接口的特性 [1] 接口中可以声明属性.接口中定义的所 ...
- PyCharm | 常见问题
1.安装使用 每次建立PyCharm工程都建立一个虚拟环境env,需要重新下载或复制模块
- openerp学习笔记 domain 的应用
1.在Action中定义,domain用于对象默认的搜索条件: 示例: <record id="action_orders" model="ir.actions.a ...
- Jmeter调试脚本之关联
前言: Jmeter关联和loadrunner关联的区别: 1.在loadrunner中,关联函数是写在要获取变量值的页面的前面,而在就Jmeter中关联函数是要写在获取变量函数值的页面的后面 2.在 ...