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>输入框值:{{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 :

输入框值:{{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>输入框值:{{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 :

输入框值:{{customInput2}}