用vue写IP地址文本框组件

小灰灰 2024-04-19 10:24 15阅读 0赞

## 前言 ##

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

## 具体内容 ##

1.  在该目录下创建组件文件  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NjM3NzA1_size_16_color_FFFFFF_t_70]  
    文件内容如下

<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.具体用法  
先引入组件  
![先引入组件][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NjM3NzA1_size_16_color_FFFFFF_t_70 1]  
然后如下使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NjM3NzA1_size_16_color_FFFFFF_t_70 2]  
3.效果  
![在这里插入图片描述][2019091711163768.png]

## 后记 ##

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NjM3NzA1_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f0c796b40026413bba01fafe2ba10376.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NjM3NzA1_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/b5e5b896e5ef4c899ce016b75ccf4079.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NjM3NzA1_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/edc8943c609a4258aaf1e87116364235.png
[2019091711163768.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/9a181553ff124581ad692dfda564c33f.png