vue-pay-input

Description

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

Install

Terminal

$ npm i vue-pay-input --save

Usage

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

<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

$ npm install
$ npm run dev