vue实现IP输入

实现原理

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

需要注意的是：
组件内部使用的props: [‘value’], value格式是 数组 所以 在页面获取数据的时候 如果后台是字符串 需要转换成数组 方可使用

展示效果

组件代码

<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'],
    data() {
      return {
        ipAddress: [
          {
            value: ''
          },{
            value: ''
          },{
            value: ''
          },{
            value: ''
          }
        ]
      }
    },
    mounted() {
      console.log(this.value)
      this.ipAddress[0].value =  this.value[0]
      this.ipAddress[1].value =  this.value[1]
      this.ipAddress[2].value =  this.value[2]
      this.ipAddress[3].value =  this.value[3]
    },
    watch: {
      value:{
        handler: function (newVal, oldVal) {
          this.ipAddress =  [
            {
              value: ''
            },{
              value: ''
            },{
              value: ''
            },{
              value: ''
            }
          ]
          if(newVal.length != 0) {
            this.ipAddress[0].value =  this.value[0]
            this.ipAddress[1].value =  this.value[1]
            this.ipAddress[2].value =  this.value[2]
            this.ipAddress[3].value =  this.value[3]
          }

        },
        deep: true
      },

      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('changes', this.ipAddress)

        },
        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;
    margin: 0 ;
  }
  .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>

页面引用

 <el-form-item label="设备IP" >
              <ip-address-input @changes="changesIp"  class="" ref="ipaddr" v-model="form.ipaddr"/>
            </el-form-item>

 import ipAddressInput from "@/components/input/ipAddressInput"
  components: {ipAddressInput},

 changesIp(val) {
        this.ips =  val[0].value + '.' + val[1].value + '.' + val[2].value + '.' + val[3].value
       },