kd-ip-input

An ip input component for Vue2.x

Demo

https://lu-shuo.github.io/kd-ip-input/

Usage

Install

npm install kd-ip-input --save

ES

Global import

// main.js
import KdIpInput from 'kd-ip-input';

Vue.use(KdIpInput)

On demand

import KdIpInput from 'kd-ip-input';

new Vue({
    components: {
        'kd-ip-input': KdIpInput
    },
    data() {
        return {
            ip: '127.0.0.1'
        };
    },
    methods: {
       handleBlur(val) {}
    },
    template: '<kd-ip-input v-model="ip" show-prefix show-port prefix="http" @blur="handleBlur"></kd-ip-input>'
})

Check (with element form)

<template>
    <el-form :model="form" :rule="rules" ref="form"> 
        <el-form-item
            label="IP地址："
            prop="ipv4"
            required
        >
            <kd-ip-input
                v-model="form.ipv4"
                check-empty-on-blur
                @blur="$refs.form.validateField('ipv4')"
            />
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    data() {
        return {
            form: {
                ipv4: '',
                rules: {
                    ipv4: [
                        {required: true, message: '请输入ip地址', trigger: 'blur'},
                    ],
                }
            }
        }
    }
}
</script>

Attributes

Attribute	Description	Type	Accepted Values	Default
value / v-model	binding value	String	--	--
prefix	network protocol (required when showPrefix)	String	http/https/wss/ws	--
showPrefix	whether use prefix	Boolean	--	false
showPort	whether use port	Boolean	--	false
disabled	whether input is disabled	Boolean	--	false
checkEmptyOnBlur	whether check value is empty on blur(red border when empty)	Boolean	--	false
clearable	whether to show clear button	Boolean	--	false
themeColor	highlight color	String	--	#427bf1

Events

Event Name	Description	Parameters
blur	triggers when the input blur	the value of the input