Vue-pay-input NPM

vue-pay-input

Description

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' 风格选择