rt-pay

vue 移动端支付密码窗插件

demo 地址

demo 演示页面

插件的安装

NPM

npm i rt-pay

引入插件

import Vue from 'vue';
import rtPay from 'rt-pay';

Vue.use(rtPay);

基本用法

<rt-pay
  ref="pays"
  v-model="show"
  :forgetPwdShow="true"
  @close="close"
  @forget="forget"
  @input-end="inputEnd"
/>

密码框组合数字键盘

<rt-pwd @open-keyboard="openKeyboard" :password="password">
  <template v-slot:keyboard>
    <rt-keyboard
      ref="vpays"
      v-model="keyboardShow"
      :characterShow="false"
      @close="close"
      @forget="forget"
      @emit-pwd="emitPwd"
      @input-end="inputEnd1"
    />
  </template>
</rt-pwd>

API

参数	说明	类型	默认值
v-model	密码框的显示隐藏	Boolean	false
forgetPwdShow	忘记密码显示隐藏	Boolean	false
characterShow	键盘字母显示隐藏	Boolean	true
digit	密码的位数	Number	6
ref	获取当前插件实例	String	-
title	弹窗标题	String	请输入支付密码
loading-text	正在支付的文字提示	String	正在支付
finished-text	支付成功的文字提示	String	支付成功
duration	支付成功提示的显示时间	Number	500

Event

事件名	说明	参数
input-end	密码输入完成后的回调函数	-
close	密码弹窗关闭后的回调函数	-
forget	点击忘记密码的回调函数	-

input-end 回调参数

参数名	说明	类型
val	支付密码	String

插件内部方法

方法名	说明	参数
$success	通知插件支付结果成功，该方法返回 promise，可在.then()方法中进行成功后的回调函数	-
$fail	密码弹窗关闭后的回调函数	-

用法示例：

支付结果成功：

this.$refs.pays.$success(true).then(res => {
  console.log('支付成功');
  this.$router.push('/success');
});

支付结果失败：

this.$refs.pays.$fail('可以自定义错误提示，默认：支付密码错误');

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report