用vue写IP地址文本框组件

前言

实现原理是用4个文本框拼到一起，中间加一个点样式，再加上对于内容的限制为0-255，再加上光标位置的判断即可。

具体内容

1. 在该目录下创建组件文件
   
   文件内容如下

<template>
    <ul class="ipAdress">
        <li v-for="(item,index) in ipAddress">
            <input ref="ipInput" v-model="item.value" type="text" class="ipInputClass" @input="checkIpVal(item)" @keyup="turnIpPosition(item,index,$event)"/>
            <div></div>
        </li>
    </ul>
</template>

<script>
export default {
    props: {
        value: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            ipAddress: [
                {
                    value: ''
                },{
                    value: ''
                },{
                    value: ''
                },{
                    value: ''
                }
            ]
        }
    },
    watch: {
        ipAddress: { // 双向数据绑定的value
            handler: function (newVal, oldVal) {
                let str = ''
                for (const i in this.ipAddress) {
                    str += this.formatter(this.ipAddress[i].value)
                }
                if (str === '000000000000') {
                    str = ''
                }
                this.$emit('input', str)
            },
            deep: true
        }
    },
    methods: {
        // 格式化补零方法
        formatter(val) {
            let value = val.toString()
            if (value.length === 2) {
                value = '0' + value
            } else if (value.length === 1) {
                value = '00' + value
            } else if (value.length === 0) {
                value = '000'
            }
            return value
        },
        // 检查ip输入为0-255
        checkIpVal(item) {
            //确保每个值都处于0-255
            let val = item.value;
            // 处理非数字
            val = val.toString().replace(/[^0-9]/g,'');
            val = parseInt(val, 10);
            if(isNaN(val)) {
                val = ''
            } else {
                val = val < 0 ? 0 : val;
                val = val > 255 ? 255 : val;
            }
            item.value = val;
        },
        // 光标位置判断
        turnIpPosition(item, index, event) {
            let self = this;
            let e = event || window.event;
            if (e.keyCode === 37) { // 左箭头向左跳转，左一不做任何措施
                if(index !== 0 && e.currentTarget.selectionStart === 0) {
                    self.$refs.ipInput[index - 1].focus();
                }
            } else if (e.keyCode == 39) { // 右箭头向右跳转，右一不做任何措施
                if(index !== 3 && e.currentTarget.selectionStart === item.value.toString().length) {
                    self.$refs.ipInput[index + 1].focus();
                }
            } else if (e.keyCode === 8) { // 删除键把当前数据删除完毕后会跳转到前一个input，左一不做任何处理
                if(index !== 0 && item.value === '') {
                    self.$refs.ipInput[index - 1].focus();
                }
            } else if (e.keyCode === 13 || e.keyCode === 32 || e.keyCode === 190) {// 回车键、空格键、冒号均向右跳转，右一不做任何措施
                if(index !== 3) {
                    self.$refs.ipInput[index + 1].focus();
                }
            } else if (item.value.toString().length === 3) { // 满3位，光标自动向下一个文本框
                if(index !== 3) {
                    self.$refs.ipInput[index + 1].focus();
                }
            }
        }
    }
}
</script>
<style type="text/css" scoped>
    .ipAdress{
        display: flex;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        width: 196px;
        height: 36px;
        padding-inline-start: 0px;
    }
    .ipAdress li{
        position: relative;
        height: 36px;
        margin: 0;
        list-style-type: none;
    }
    .ipInputClass{
        border: none;
        width: 49px;
        height: 23px;
        text-align: center;
        background: transparent;
    }
    .ipAdress li div{
        position: absolute;
        bottom: 8px;
        right: 0;
        border-radius: 50%;
        background: #505050;
        width: 2px;
        height: 2px;
    }
    /*只需要3个div*/
    .ipAdress li:last-child div{
        display: none;
    }
    /*取消掉默认的input focus状态*/
    .ipAdress input:focus{
        outline: none;
    }
</style>

2.具体用法
先引入组件

然后如下使用

3.效果

后记

具体使用中根据项目样式风格调调样式，改改方法就可以了。