vue-custom-inputs v1.0.4

Vue custom input

Vue custom input is a vue component for custom split input box, mobile web input box, simulating native app input box and etc. It's designed to input password and verification code. But you can also use it in other situation as you wish.

Demo

https://youjingyu.github.io/vue-custom-input/dist/example/

Installation

npm i vue-custom-inputs -S

Usage

use in vue single file components

<template>
    <custom-input
        input-height="50px"
        :input-number="4"
        input-type="number"
        input-style-type="oneBorder"
        @custom-input-change="change"
        @custom-input-complete="complete">
    </custom-input>
</template>
<script>
    import customInput from 'vue-custom-input';
    export default {
        components: { 'custom-input': customInput },
        methods: {
            change(val) {
                
            },
            complete(val) {
                
            }
        }
    }
</script>

use in browser globals

<div id="app">
    <custom-input></custom-input>
</div>
<script src="vue.js"></script>
<script src="vue-custom.js"></script>
<script>
     new Vue({
        el: '#app',
        components: {
            'custom-input': window.customInput
        }
     });
</script>

API

Vue custom input component attributes: