# trj-pay-keyboard

> A Vue component to pay-keyboard

Latest version **1.1.16** (published 2021-04-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install trj-pay-keyboard
pnpm add trj-pay-keyboard
yarn add trj-pay-keyboard
bun add trj-pay-keyboard
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.16 |
| Published | 2021-04-15 |
| First published | 2021-04-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 125.9 KB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 163 |
| Author | yucccc |
| Maintainers | tianrenji |

## Links

- npm: https://www.npmjs.com/package/trj-pay-keyboard
- Repository: https://github.com/yucccc/vue-pay-keyboard
- Homepage: https://github.com/yucccc/vue-pay-keyboard#readme
- Issues: https://github.com/yucccc/vue-pay-keyboard/issues
- npm.io page: https://npm.io/package/trj-pay-keyboard

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.3.3
- [node-sass](https://npm.io/package/node-sass.md) ^5.0.0
- [vue-pay-keyboard](https://npm.io/package/vue-pay-keyboard.md) ^1.1.2

## Recent versions

- 1.1.16 (latest) — 2021-04-15
- 1.1.15 — 2021-04-15
- 1.1.14 — 2021-04-12
- 1.1.13 — 2021-04-12
- 1.1.12 — 2021-04-12
- 1.1.11 — 2021-04-12
- 1.1.10 — 2021-04-12
- 1.1.9 — 2021-04-12
- 1.1.8 — 2021-04-12
- 1.1.7 — 2021-04-12
- 1.1.6 — 2021-04-12
- 1.1.5 — 2021-04-12

## README

# vue-pay-keyboard

A Vue component to pay-keyboard
一个虚拟数字支付键盘插件

[vue插件开发与发布](https://www.jianshu.com/p/d6855556cd75)


## 安装

```JS
npm install trj-pay-keyboard -S
```

## 使用

```js
// ES6 main.js 全局使用组件
import vuePayKeyboard from 'trj-pay-keyboard'

Vue.use(vuePayKeyboard)

// 组件内使用
import {vuePayKeyboard} from 'trj-pay-keyboard'

components{
    'vue-pay-keyboard':vuePayKeyboard
}
```

### 配置

```html
   <vue-pay-keyboard
   ref="pay"
   :is-pay='isPay'
   @pas-end='pasEnd'
   @close='isPay=false'>
    <!-- 自定义支付动画 -->
      <div slot="loading-ani">
        <svg></svg>
      </div>
    </vue-pay-keyboard>
```

```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    |  关闭键盘

---
_Source: https://npm.io/package/trj-pay-keyboard · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._