vue-pay-keyboard
A Vue component to pay-keyboard
一个虚拟数字支付键盘插件
vue插件开发与发布�
demo演示
demo
安装
npm install vue - pay - keyboard - S
使用
// ES6
import vuePayKeyboard from 'vue-pay-keyboard.js'
// require
var vuePayKeyboard = require ( 'PayKeyboard' )
Vue . use ( vuePayKeyboard )
// 或者直接使用script导入
< script src = "./node_modules/vue/dist/vue-pay-keyboard.js" > < / script >
// 作为组件的方式使用
< vue-pay-keyboard > < / vue-pay-keyboard >
配置
< vue-pay-keyboard
ref ="pay "
:is-pay ='isPay '
@pas-end ='pasEnd '
@close ='isPay=false '>
<!-- 自定义支付动画 -->
< div slot ="loading-ani ">
< svg > </ svg >
</ div >
</ vue-pay-keyboard >
methods:{
pasEnd ( val ) {
console . log ( val ) ; //得到密码 可能会进行一些加密动作
setTimeout ( ( ) => { // 模拟请求接口验证密码中 ..
if ( val === '111111' ) { // 密码正确
this . $refs . pay . $payStatus ( true ) // 拿到子组件的事件
} else {
this . $refs . pay . $payStatus ( false )
}
} , 1000 )
}
}
Props
name
Description
type
default
highlight-color
点击时高亮颜色
String
#000
pas-digits
密码位数
Number
6
is-pay
显示键盘
Boolean
false
pay-title
支付标题
String
请输入支付密码
Slots 支持自定义插槽
name
Description
type
default
loading-ani
支付请求中
loading
pay-status
支付成功或者失败
支付成功
Events
name
Description
pas-end
密码输入完毕后触发事件,接收所输密码
close
关闭键盘