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

淡淡的烟草味﹌ 2022-11-29 13:05 350阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pwXzU2Nw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pwXzU2Nw_size_16_color_FFFFFF_t_70 1][]

## 插件链接：[https://ext.dcloud.net.cn/plugin?id=2591][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 },`

### 方法介绍 ###

事件

<table> 
 <thead> 
  <tr> 
   <th>事件名</th> 
   <th>返回参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://github.com/completed" rel="nofollow">@completed</a></td> 
   <td>六位支付密码</td> 
   <td>密码输入完成后返回密码</td> 
  </tr> 
  <tr> 
   <td><a href="https://github.com/forget" rel="nofollow">@forget</a></td> 
   <td>&nbsp;</td> 
   <td>忘记密码点击事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://github.com/toCancel" rel="nofollow">@toCancel</a></td> 
   <td>&nbsp;</td> 
   <td>关闭输入框</td> 
  </tr> 
  <tr> 
   <td><a href="https://github.com/inputPwd" rel="nofollow">@inputPwd</a></td> 
   <td>当前输入的密码（一位）</td> 
   <td>当前输入的密码，如用于密码错误后再次输入时清空密码提示语句</td> 
  </tr> 
 </tbody> 
</table>

方法

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>toOpen</td> 
   <td>启用支付密码，用法（this.$refs.jpPwds.toOpen()）</td> 
  </tr> 
  <tr> 
   <td>backs</td> 
   <td>清空密码</td> 
  </tr> 
  <tr> 
   <td>toCancel</td> 
   <td>关闭输入框</td> 
  </tr> 
 </tbody> 
</table>

参数说明

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>payType</td> 
   <td>String</td> 
   <td>one</td> 
   <td>支付样式（ one和two）</td> 
  </tr> 
  <tr> 
   <td>keyType</td> 
   <td>String</td> 
   <td>one</td> 
   <td>键盘样式</td> 
  </tr> 
  <tr> 
   <td>pawType</td> 
   <td>String</td> 
   <td>one</td> 
   <td>输入框样式</td> 
  </tr> 
  <tr> 
   <td>money</td> 
   <td>[String, Number]</td> 
   <td>0</td> 
   <td>支付金额</td> 
  </tr> 
  <tr> 
   <td>tite</td> 
   <td>String</td> 
   <td>请输入支付密码</td> 
   <td>标题 （可以传入空值后标题不显示）</td> 
  </tr> 
  <tr> 
   <td>contents</td> 
   <td>String</td> 
   <td>请输入支付密码</td> 
   <td>提示 （可以传入空值后提示不显示）</td> 
  </tr> 
  <tr> 
   <td>msg</td> 
   <td>String</td> 
   <td>密码错误</td> 
   <td>密码错误提示语 （可以传入空值后密码错误提示语不显示）</td> 
  </tr> 
  <tr> 
   <td>forgetName</td> 
   <td>String</td> 
   <td>忘记密码？</td> 
   <td>忘记密码 （可以传入空值后忘记密码不显示）</td> 
  </tr> 
  <tr> 
   <td>cancelType</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否输入完密码后消失</td> 
  </tr> 
  <tr> 
   <td>keep</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>点击遮挡是否关闭</td> 
  </tr> 
 </tbody> 
</table>

说明

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pwXzU2Nw_size_16_color_FFFFFF_t_70]: /images/20221124/e8470cd33169492a8bf0b44bc704140a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pwXzU2Nw_size_16_color_FFFFFF_t_70 1]: /images/20221124/7ceb5178592a4bd4b7a7a21d33aeacdb.png
[https_ext.dcloud.net.cn_plugin_id_2591]: https://ext.dcloud.net.cn/plugin?id=2591