更新记录

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三个值传入的不同选择自己需要的支付样式,样式请自行探索

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问