uniapp 密码支付，多样式支付，数字密码，支付密码，数字键盘，多样自定义支付组件，可以根据用户需求调节支付样式，总共八中组合满足大多数需求，真正的开箱即用

插件链接：https://ext.dcloud.net.cn/plugin?id=2591

作者说

开发不易，如果帮助到你的，请支持
有问题请留言，作者会积极更新

使用方法

# 基础用法

复制代码

1. <template>
2. <view class="content">
3. <view class="zwyHeightSec but" @tap="toOpen">经典样式一马上去支付</view>
4. <jpPwd ref="jpPwds" @completed="completed" @forget="forget" ></jpPwd>
5. </view>
6. </template>
7.  
8.  
9. import jpPwd from '@/components/jp-pwd/jp-pwd.vue';
10. export default {
11. components: {
12. jpPwd
13. },
14. methods: {
15. toOpen() {
16. this.$refs.jpPwds.toOpen()
17. },
18. completed(e) {
19. if (e == '123456') {
20. this.$refs.jpPwds.toCancel()
21. } else {
22. this.pwd.msg = '密码错误'
23. this.$refs.jpPwds.backs()
24. }
25. },
26. forget() {
27. console.log('忘记密码')
28. }
29. }
30. }
31.  

引入方法

复制代码

1. <jpPwd ref="jpPwds"></jpPwd>
2. import jpPwd from '@/components/jp-pwd/jp-pwd.vue';
3. 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	请输入支付密码	标题 （可以传入空值后标题不显示）
contents	String	请输入支付密码	提示 （可以传入空值后提示不显示）
msg	String	密码错误	密码错误提示语 （可以传入空值后密码错误提示语不显示）
forgetName	String	忘记密码？	忘记密码 （可以传入空值后忘记密码不显示）
cancelType	Boolean	false	是否输入完密码后消失
keep	Boolean	false	点击遮挡是否关闭

说明

用户可以根据payType，keyType，pawType三个值传入的不同选择自己需要的支付样式，需要说明样式请自行探索