https://github.com/yucccc/vue-pay-keyboard
⌨️ 一个vue手机虚拟支付数字键盘插件
https://github.com/yucccc/vue-pay-keyboard
Last synced: 3 months ago
JSON representation
⌨️ 一个vue手机虚拟支付数字键盘插件
- Host: GitHub
- URL: https://github.com/yucccc/vue-pay-keyboard
- Owner: yucccc
- Created: 2017-06-04T07:59:37.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-03-18T01:57:52.000Z (about 3 years ago)
- Last Synced: 2025-02-28T16:02:31.663Z (3 months ago)
- Language: Vue
- Homepage:
- Size: 463 KB
- Stars: 164
- Watchers: 4
- Forks: 93
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-pay-keyboard
A Vue component to pay-keyboard
一个虚拟数字支付键盘插件
[vue插件开发与发布](https://www.jianshu.com/p/d6855556cd75)
## demo演示
[demo](http://mall.yucccc.com/vuepayboard/)
## 安装
```JS
npm install vue-pay-keyboard -S
```
## 使用
```js
// ES6
import vuePayKeyboard from 'vue-pay-keyboard.js'
// require
var vuePayKeyboard = require('PayKeyboard')
Vue.use(vuePayKeyboard)
// 或者直接使用script导入
// 作为组件的方式使用
```
### 配置
```html
```
```javascript
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 | 关闭键盘