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. See docs.

Examples :

Code :

        
            <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>
                <h4>input value：{{customInput}}</h4>
            </template>
            <script>
                import customInput from 'vue-custom-input';
                export default {
                    data() {
                        return {
                            customInput: ''
                        }
                    },
                    components: { 'custom-input': customInput },
                    methods: {
                        change(val) {
                            this.customInput = val;
                        },
                        complete(val) {
                            this.customInput = val;
                        }
                    }
                }
            </script>

Result :

input value：{{customInput}}

Code :

        
            <template>
                <custom-input
                        input-height="50px"
                        :input-number="6"
                        input-style-type="allBorder"
                        input-type="password"
                        password-char="*"
                        :input-style="inputStyle"
                        :input-active-style="inputActiveStyle"
                        @custom-input-change="change2"
                        @custom-input-complete="complete2">
                </custom-input>
                <h4>input value：{{customInput2}}</h4>
            </template>
            <script>
                import customInput from 'vue-custom-input';
                export default {
                    data: function () {
                        return {
                            inputStyle: {'border-color': '#20A0FF'},
                            inputActiveStyle: {'outline': '#58B7FF ridge 1px'},
                            customInput2: ''
                        }
                    },
                    components: { 'custom-input': customInput },
                    methods: {
                        change2: function (val) {
                            this.customInput2 = val;
                        },
                        complete2: function (val) {
                            this.customInput2 = val;
                        }
                    }
                }
            </script>

Result :

input value：{{customInput2}}