vue-custom-inputs

Vue component for custom input, mobile web input, simulating native app input.


Keywords
vue, input, custom input, mobile web input, simulate native app input
License
MIT
Install
npm install vue-custom-inputs@1.0.4

Documentation

Vue custom input version vue

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:

Attr. Name Description Required Type Default Value
custom-input-change called when input value is changed N Function -
custom-input-complete called when all input boxes are filled N Function -
input-number input box number N Number 4
input-style-type two preset styles. You can also design your style by the following attributes N 'allBorder', 'oneBorder' 'allBorder'
input-type just like html5 input type attribute, can be tel, number, text and etc. N String 'text'
password-char the character showed in input box when the input-type is password N String '*'
input-width input box width N String -
input-height input box height N String '50px'
input-border-width input box border width N String '1px'
input-border-color input box border color N String '#20A0FF'
input-active-outline-color input box outline color when focus on it N String '#58B7FF'
input-style customize input box style as you want. All styles will be injected into box's style attribute N Object {}
input-active-style input box style when focus on it. All styles will be injected into box's style attribute N Object {}