web-point-standard/src/components/config_point/ip_input.vue

<template>
    <ul class="ipAdress">
        <li v-for="(item,index) in ipAdress" class="saga-border">
            <input type="text" @input="checkIpVal(item,index)" @keyup="turnIpPOS(item,index,$event)" v-model="item.value" ref="ipInput" @blur="setDefaultVal(item)">
            <!-- <div></div> -->
        </li>
        <span>：</span>
        <li class="saga-border">
            <input type="text" @input="checkIpVal(value,4)" @keyup="turnIpPOS(value,4,$event)" v-model="value.value" ref="ipInput" @blur="setDefaultVal(value)">
            <!-- <div></div> -->
        </li>
    </ul>
</template>
<script>
    export default {
        name: "ipInput",
        data() {
            return {
                ipAdress: [{
                    value: ''
                }, {
                    value: ''
                }, {
                    value: ''
                }, {
                    value: ''
                }],
                value: [{
                    value: ''
                }]
            }
        },
        created() {},
        mounted() {},
        methods: {
            //methods
            checkIpVal(item, index) {
                let self = this;
                //确保每个值都处于0-255
                let val = item.value;
                //当输入的是空格时，值赋为空
                val = val.trim();
                val = parseInt(val, 10);
                if (isNaN(val)) {
                    val = ''
                } else {
                    if (index == 4) {
                        val = val < 0 ? 0 : val;
                        val = val > 65535 ? 65535 : val;
                    } else {
                        val = val < 0 ? 0 : val;
                        val = val > 255 ? 255 : val;
                    }
                }
                item.value = val;
            },
            turnIpPOS(item, index, event) {
                let self = this;
                let e = event || window.event;
                //左箭头向左跳转，左一不做任何措施
                if (e.keyCode == 37) {
                    if (index == 0) {} else {
                        self.$refs.ipInput[index - 1].focus();
                    }
                }
                //删除键把当前数据删除完毕后会跳转到前一个input，左一不做任何处理
                if (e.keyCode == 8) {
                    let val = item.value;
                    if (index == 0) {} else {
                        self.$refs.ipInput[index - 1].focus();
                    }
                }
                //右箭头、回车键、空格键、冒号均向右跳转，右一不做任何措施
                if (e.keyCode == 39 || e.keyCode == 13 || e.keyCode == 32 || e.keyCode == 190) {
                    if (index == 4) {} else {
                        self.$refs.ipInput[index + 1].focus();
                    }
                }
            },
            setDefaultVal(item) {
                //当input失去焦点，而ip没有赋值时，会自动赋值为0
                let self = this;
                let val = item.value;
                if (val == '') {
                    item.value = '0';
                }
            },
        }
    }
</script>
<style lang="scss" scoped>
    .ipAdress {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        margin-right: 10px;
        justify-content: space-around;
    }
    .ipAdress li {
        position: relative; //   height: 23px;
        margin: 2px;
    }
    ul[class="ipAdress"] input[type="text"] {
        border: none;
        width: 100%; //   height: 23px;
        text-align: center;
        background: transparent;
    }
    .ipAdress li div {
        position: absolute;
        bottom: 2px;
        right: 0;
        border-radius: 50%;
        background: #0190fe;
        width: 2px;
        height: 2px;
    }
    /*只需要3个div*/
    .ipAdress li:last-child div {
        display: none;
    }
    /*取消掉默认的input focus状态*/
    .ipAdress input:focus {
        outline: none;
    }
</style>