vue+element封装一个填写和校验ip地址的组件

输入ip地址，输完自己切换到一下输入框，校验IP的准确性。
组件样式如下图

使用方法

<template>
  <IpAddress v-model="deviceIPAddress" />
  </template>
<script>

export default {
data () {
    return {
      deviceIPAddress:''  //输出格式是字符串 192.166.111.10
    }
}

</script>

IpAddress组件代码

<template>
  <div class="IpBox">
    <div class="IpItem" v-for="(item, index) in ipAddress" :key="index">
      <input type="text" v-model="item.value" @input="checkIpVal(item)" @keyup="turnIpPosition(item, index, $event)" class="inputBox" ref="ipInput" />
      <span v-show="index<3">.</span>
    </div>
  </div>
</template>

<script>
export default {
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  data () {
    return {
      ipAddress: [
        {
          value: "",
        },
        {
          value: "",
        },
        {
          value: "",
        },
        {
          value: "",
        },
      ],
    };
  },
  mounted () {
    if (this.value === "") {
      this.ipAddress[0].value = "";
      this.ipAddress[1].value = "";
      this.ipAddress[2].value = "";
      this.ipAddress[3].value = "";
    } else {
      let ipList = this.value.split(".");
      this.ipAddress[0].value = ipList[0] || "";
      this.ipAddress[1].value = ipList[1] || "";
      this.ipAddress[2].value = ipList[2] || "";
      this.ipAddress[3].value = ipList[3] || "";
    }
  },
  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(
          "change",
          this.ipAddress.map((item) => item.value + "").join(".")
        );
      },
      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 lang="scss" scoped>
.IpBox {
  display: flex;
  margin-top: 10px;
  .IpItem {
    .inputBox {
      width: 61px;
      height: 35px;
      text-align: center;
      display: inline-block;
      vertical-align: text-bottom;
      line-height: 35px;
      background: #f2f2f2;
      border: 1px solid #c3c3c3;
      border-radius: 3px;
      margin-left: 2px;
      color: #888;
      box-sizing: border-box;
    }
    span {
      display: inline-block;
      vertical-align: baseline;
      width: 5px;
      text-align: center;
      font-size: 28px;
      margin-right: 2px;
    }
  }
}
/*取消掉默认的input focus状态*/
.IpItem input:focus {
  outline: none;
}
</style>