1.0.4 • Published 5 years ago
rt-pay v1.0.4
rt-pay
vue 移动端支付密码窗插件
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