更新记录
2.3(2020-09-09) 下载此版本
增加明文显示,贴合更多用户需求
2.2(2020-09-04) 下载此版本
添加了键盘背景,让支付不再单调,添加了键盘打散功能,满足更多需求,请收藏,持续更新中
1.0.3(2020-08-25) 下载此版本
密码位数自定义文档
查看更多平台兼容性
作者说
有项目需要开发的请联系 QQ:371524845 微信:jp99ww
本团队人员配备齐全,定会让君满意而归
开发不易,如果帮助到你的,请支持 有问题请留言,作者会积极更新
使用方法
基础用法
<template>
<view class="content">
<view class="zwyHeightSec but" @tap="toOpen">经典样式一马上去支付</view>
<jpPwd ref="jpPwds" @completed="completed" @forget="forget" ></jpPwd>
</view>
</template>
import jpPwd from '@/components/jp-pwd/jp-pwd.vue';
export default {
components: { jpPwd },
methods: {
toOpen() {
this.$refs.jpPwds.toOpen()
},
completed(e) {
if (e == '123456') {
this.$refs.jpPwds.toCancel()
} else {
this.pwd.msg = '密码错误'
this.$refs.jpPwds.backs()
}
},
forget() {
console.log('忘记密码')
}
}
}
引入方法
<jpPwd ref="jpPwds"></jpPwd>
import jpPwd from '@/components/jp-pwd/jp-pwd.vue';
components: { jpPwd },
方法介绍 事件
事件名 | 返回参数 | 说明 |
---|---|---|
@completed | 六位支付密码 | 密码输入完成后返回密码 |
@forget | 忘记密码点击事件 | |
@toCancel | 关闭输入框 | |
@inputPwd | 当前输入的密码(一位) | 当前输入的密码,如用于密码错误后再次输入时清空密码提示语句 |
方法
方法名 | 说明 |
---|---|
toOpen | 启用支付密码,用法(this.$refs.jpPwds.toOpen()) |
backs | 清空密码 |
toCancel | 关闭输入框 |
参数说明
参数名 | 类型 | 默认值 | 说明 |
---|---|---|---|
payType | String | one | 支付样式( one和two) |
keyType | String | one | 键盘样式 |
pawType | String | one | 输入框样式 |
money | [String, Number] | 0 | 支付金额 |
tite | String | 请输入支付密码 | 标题 (可以传入空值后标题不显示) |
titeColor | String | #333 | 标题颜色 |
contents | String | 请输入支付密码 | 提示 (可以传入空值后提示不显示) |
contentsColor | String | #888 | 提示颜色 |
msg | String | 密码错误 | 密码错误提示语 (可以传入空值后密码错误提示语不显示) |
msgsColor | String | #F43F3B | 密码错误提示语颜色 |
forgetName | String | 忘记密码? | 忘记密码 (可以传入空值后忘记密码不显示) |
forgetNameColor | String | #0081F | 忘记密码颜色 |
cancelType | Boolean | false | 是否输入完密码后消失 |
keep | Boolean | false | 点击遮挡是否关闭 |
places | Number | 6 | 密码位数 |
topImg | String | 头部背景地址 | |
keyImg | String | 键盘背景地址(支付样式一时如果启用键盘背景则头部样式不生效) | |
random | Boolean | false | 键盘数字是否打散 |
isPwy | Boolean | true | 是否显示密文 |
说明 用户可以根据payType,keyType,pawType三个值传入的不同选择自己需要的支付样式,样式请自行探索