# vue-pay-input

> A Vue.js project

Latest version **1.0.6** (published 2019-02-25) · 0 weekly downloads

## Install

```sh
npm install vue-pay-input
pnpm add vue-pay-input
yarn add vue-pay-input
bun add vue-pay-input
```

## 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.0.6 |
| Published | 2019-02-25 |
| First published | 2019-02-19 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6.0.0 |
| Dependencies | 2 |
| Unpacked size | 136 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 5 |
| Author | qingyl |
| Maintainers | qingyulan |
| Keywords | vue, payInput, input, pay |

## Links

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

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.5.2
- [vue-router](https://npm.io/package/vue-router.md) ^3.0.1

## Recent versions

- 1.0.6 (latest) — 2019-02-25
- 1.0.5 — 2019-02-25
- 1.0.4 — 2019-02-25
- 1.0.3 — 2019-02-23
- 1.0.1 — 2019-02-23
- 1.0.0 — 2019-02-23
- 2.0.2 — 2019-02-19
- 2.0.1 — 2019-02-19
- 2.0.0 — 2019-02-19

## README

# vue-pay-input

## Description

Demo
https://5yojky3vr4.codesandbox.io/

## Install

### Terminal
```shell
$ npm i vue-pay-input --save
```


## Usage
```javascript
  //main.js
   import payInput from 'vue-pay-input'
   Vue.use(payInput)

```
```html

<template>
  <div >
     <payInput ref="payInput" @change="change" :styles="styles" payItem="pay-item" v-model="value" :type="type" :len="6"></payInput>
  </div>
</template>
<script>
  export default {
      data() {
        return {
            value: "",
            styles:'merge',
            type:'password'
        };
    },
    components: {
    },
    methods: {
        clear() {
            this.$refs.payInput.clear();
        },
        change(val) {
            console.log(`输入的值:${val}`);
        },
        focus() {
            this.$refs.payInput.focus();
        },
        blur() {
            this.$refs.payInput.blur();
        },
        show(){
          this.type=='password'?this.type='text':this.type='password'
        },
         stylefun(){
            this.styles=='separate'?this.styles='merge':this.styles='separate'
        }
    }
  }
</script>
```

## Prop

| Name         | Type      | Default      | Description              |
|--------------|-----------|--------------|--------------------------|
| len          | number    | 4            | input value length    输入框的长度   |
| value        | string    | ''           | default input value   v-model绑定值   |
| type         | string    | password     | 'password' or 'text'  是否显示输入内容     |
| styles       | string    | separate     | 'separate' or 'merge'  风格选择     |


## API

| Name         | Description              |
|--------------|--------------------------|
| change       |  input change              |


## Event

| Name         | Description              |
|--------------|--------------------------|
| clear        | clear input              |
| focus        | focus event              |
| blur         | blur event               |


## Devlopment

```sh
$ npm install
$ npm run dev
```

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