Vue IP地址输入框实例代码

更新时间：2023年10月26日 14:40:21 作者：Krpgly

本文通过实例代码给大家介绍Vue IP地址输入框实现,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

Vue IP地址输入框

效果

使用

<template>
  <IpInput ref="ipInput"></IpInput>
</template>

this.$refs.ipInput.getIP("10.90.15.66");
const ip = this.$refs.ipInput.value.getIP();
console.log(ip);

代码

<template>
  <div v-for="(item, index) in ipAddress" :key="index" style="display: flex; width: 25%">
    <el-input ref="ipInput" v-model="item.value" type="text" @input="checkFormat(item)" @keydown="setPosition(item, index, $event)" />
    <div v-if="index < 3">.</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ipAddress: [
        {
          value: ""
        },
        {
          value: ""
        },
        {
          value: ""
        },
        {
          value: ""
        }
      ]
    };
  },
  // 开启实时更新并emit IP地址
  // watch: {
  //   ipAddress: {
  //     // 双向数据绑定的value
  //     handler: function () {
  //       this.$emit("changed", this.getIP());
  //     },
  //     deep: true
  //   }
  // },
  methods: {
    // 检查格式
    checkFormat(item) {
      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;
    },
    // 判断光标位置
    async setPosition(item, index, event) {
      if (event && event.currentTarget.selectionStart !== event.currentTarget.selectionEnd) {
        return;
      }
      if (event && (event.key === "ArrowRight" || event.key === "ArrowLeft")) {
        event.preventDefault(); // 阻止事件的默认行为
      }
      if (event.key === "ArrowLeft") {
        // 向左移动
        if (event.currentTarget.selectionStart === 0) {
          this.previousBlock(index);
        } else {
          event.currentTarget.selectionStart -= 1;
          event.currentTarget.selectionEnd = event.currentTarget.selectionStart;
        }
      } else if (event.key === "ArrowRight") {
        // 向右移动
        if (event.currentTarget.selectionStart === item.value.toString().length) {
          this.nextBlock(index);
        } else {
          // 正常格内移动
          event.currentTarget.selectionStart += 1;
          event.currentTarget.selectionEnd = event.currentTarget.selectionStart;
        }
      } else if (event.key === "Backspace") {
        // 删除键
        if (/* item.value.toString() === "" && */ event.currentTarget.selectionStart === 0) {
          this.previousBlock(index);
        }
      } else if (event.key === "Enter" || event.key === "." || event.key === " ") {
        // 回车键、点和空格键均向右移动
        this.nextBlock(index);
      } else if (item.value.toString().length === 3 && event.currentTarget.selectionStart === 3) {
        // 输入3位后光标自动移动到下一个文本框
        this.nextBlock(index);
      }
    },
    nextBlock(index) {
      if (index < 3) {
        const element = this.$refs.ipInput[index + 1];
        element.$el.querySelector(".el-input__inner").selectionStart = 0;
        element.$el.querySelector(".el-input__inner").selectionEnd = 0;
        element.focus();
      }
    },
    previousBlock(index) {
      if (index > 0) {
        const element = this.$refs.ipInput[index - 1];
        const position = this.ipAddress[index - 1]?.value?.toString().length;
        element.$el.querySelector(".el-input__inner").selectionStart = position;
        element.$el.querySelector(".el-input__inner").selectionEnd = position;
        element.focus();
      }
    },
    setIP(ip) {
      const values = ip.split(".");
      for (const i in this.ipAddress) {
        this.ipAddress[i].value = values[i] ?? "";
      }
    },
    getIP() {
      let result = "";
      for (const i in this.ipAddress) {
        if (i > 0) result += ".";
        result += this.ipAddress[i].value;
      }
      return result;
    }
  }
};
</script>

补充：Vue3实现IP地址输入框

前言

在网上找了一点资料，但是还是觉得不太行，就自己写了一个，与网上的也大差不差，都是用4个输入框和.号组合起来的，主要就是监听输入框事件和键盘按下事件还有光标位置完成的，废话不多说，直接复制就可以用了。

使用方法

1.我已经将这个代码注册为了一个组件，在自己的组件库中创建文件IpModel.vue，将下面的代码复制到组件中。

#IpModel.vue
<template>
  <div class="ip-input">
    <input id="ip1" v-model="ip1" ref='input1' @input="handleInput(1)" @keydown="handleKeyDown($event, 1)"
      maxlength="3" />
    <span>.</span>
    <input id="ip2" v-model="ip2" ref='input2' @input="handleInput(2)" @keydown="handleKeyDown($event, 2)"
      maxlength="3" />
    <span>.</span>
    <input id="ip3" v-model="ip3" ref='input3' @input="handleInput(3)" @keydown="handleKeyDown($event, 3)"
      maxlength="3" />
    <span>.</span>
    <input id="ip4" v-model="ip4" ref='input4' @input="handleInput(4)" @keydown="handleKeyDown($event, 4)"
      maxlength="3" />
  </div>
</template>
 
<script>
export default {
  name: "IpModel",
  props: {
    IP: String,
  },
  data() {
    return {
      ip1: "",
      ip2: "",
      ip3: "",
      ip4: "",
    };
  },
  methods: {
    handleInput(index) {
      this[`ip${index}`] = this[`ip${index}`].replace(/[^0-9]/g, '')
      let ip = this[`ip${index}`];
      if (ip.length > 1 && ip[0] === "0") {
        this[`ip${index}`] = ip.slice(1);
      }
      if (ip > 255) {
        this[`ip${index}`] = "255";
      }
      if (ip.length === 3 || ip[0] === "0") {
        let nextIndex = index + 1;
        if (nextIndex <= 4) {
          this.$refs[`input${nextIndex}`].focus();
        }
      }
    },
    handleKeyDown(event, index) {
      let ip = this[`ip${index}`];
      if (event.keyCode == 8 && 0 == document.getElementById(`ip${index}`).selectionStart) {
        let nextIndex = index - 1;
        if (nextIndex >= 1) {
          this.$refs[`input${nextIndex}`].focus();
          document.getElementById(`ip${nextIndex}`).setSelectionRange(this[`ip${nextIndex}`].length, this[`ip${nextIndex}`].length)
        }
      } else if (event.keyCode == 46 && ip.length == document.getElementById(`ip${index}`).selectionStart) {
        let nextIndex = index + 1;
        if (nextIndex <= 4) {
          this.$refs[`input${nextIndex}`].focus();
          document.getElementById(`ip${nextIndex}`).setSelectionRange(0, 0)
        }
      }
      else if ((event.keyCode == 37) && 0 == document.getElementById(`ip${index}`).selectionStart) {
        let nextIndex = index - 1;
        if (nextIndex >= 1) {
          this.$refs[`input${nextIndex}`].focus();
          document.getElementById(`ip${nextIndex}`).setSelectionRange(this[`ip${nextIndex}`].length, this[`ip${nextIndex}`].length)
        }
      } else if ((event.keyCode == 39) && ip.length == document.getElementById(`ip${index}`).selectionStart) {
        let nextIndex = index + 1;
        if (nextIndex <= 4) {
          this.$refs[`input${nextIndex}`].focus();
          document.getElementById(`ip${nextIndex}`).setSelectionRange(0, 0)
        }
      } else if (event.keyCode == 110 || event.keyCode == 190) {
        let nextIndex = index + 1;
        if (nextIndex <= 4) {
          this.$refs[`input${nextIndex}`].focus();
        }
      } else {
        return false
      }
    },
    IpModelSend() {
      if (this.ip1 == '' || this.ip2 == '' || this.ip3 == '' || this.ip4 == '') {
        this.$message({
          duration: 1000,
          message: 'IP地址非法,请输入正确的IP地址!'
        });
      } else {
        const ip = this.ip1 + '.' + this.ip2 + '.' + this.ip3 + '.' + this.ip4
        this.$emit('changeIP', ip);
      }
    },
    IpModelCancel() {
      this.ip1 = this.IP.split('.')[0]
      this.ip2 = this.IP.split('.')[1]
      this.ip3 = this.IP.split('.')[2]
      this.ip4 = this.IP.split('.')[3]
    }
  },
};
</script>
 
<style scoped>
.ip-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 160px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 16px;
}
 
.ip-input input {
  width: 30px;
  height: 90%;
  border: none;
  outline: none;
  text-align: center;
  font-size: 16px;
}
 
.ip-input span {
  font-size: 16px;
}
</style>

2.在需要使用到IP输入框的地方调用组件即可，例如：

<template>
  <div>
    <button class="ethernet" @click="IPVisible = true">IP输入框</button>
    <el-dialog v-model="IPVisible" title="" width="350px" align-center>
      <IpModel ref="ipModel" :IP="IP" v-on:changeIP="changeIP"></IpModel>
      <template #footer>
        <el-button @click="ipModelSure">确认</el-button>
        <el-button @click="ipModelCancel">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
 
<script>
import IpModel from '../components/IpModel.vue'
export default {
  components: {
    IpModel
  },
  data() {
    return {
      IPVisible: false,
      IP: "127.0.0.1",
    }
  },
  methods: {
    ipModelSure() {
      this.$refs.ipModel.IpModelSend(); // 调用IpModel子组件的IpModelSend方法
    },
    ipModelCancel() {
      this.IPVisible = false
      this.$refs.ipModel.IpModelCancel(); // 调用IpModel子组件的IpModelCancel方法
    },
    changeIP(value) {
      console.log(value)
      this.IPVisible = false
    },
  },
}
</script>
 
<style scoped></style>

3.当点击确定按钮时，父组件通过this.$refs.ipModel.IpModelSend();去调用子组件的方法，子组件通过this.$emit('changeIP', ip);返回ip值，父组件通过监听事件changeIP调用方法打印出ip

4.当点击取消按钮时，父组件通过this.$refs.ipModel.IpModelCancel();去调用子组件的方法，重新给ip赋值，使数据不产生变化

到此这篇关于Vue IP地址输入框的文章就介绍到这了,更多相关vue ip地址输入框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Element-ui Dialog对话框基本使用
这篇文章主要为大家介绍了Element-ui Dialog对话框基本使用示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
解决vant-UI库修改样式无效的问题
这篇文章主要介绍了解决vant-UI库修改样式无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue3.2新增指令v-memo的基本使用教程
ue3.2新增了一个指令v-memo,引入这个指令的目的是帮助大家更好的为我们的应用做性能优化,下面这篇文章主要给大家介绍了关于vue3.2新增指令v-memo基本使用的相关资料,需要的朋友可以参考下
2022-09-09
elementUI中input回车触发页面刷新问题与解决方法
这篇文章主要给大家介绍了关于elementUI中input回车触发页面刷新问题与解决方法,文中通过实例代码介绍的非常详细,对大家学习或者使用elementUI具有一定的参考学习价值,需要的朋友可以参考下
2023-07-07
使用vant-uploader上传照片无法删除的解决
这篇文章主要介绍了使用vant-uploader上传照片无法删除的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue3中reactive不能直接赋值的解决方案
这篇文章主要介绍了vue3中reactive不能直接赋值的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
vue.js框架实现表单排序和分页效果
这篇文章主要为大家详细介绍了vue.js框架实现表单排序和分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
优雅地使用loading(推荐)
这篇文章主要介绍了在Vue和React中如何优雅地使用loading，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
vite+vue3不清除浏览器缓存直接下载最新代码的解决方案
vite+vue3项目发布后,浏览器上还是旧代码,没有及时更新到最新代码,下面通过本文给大家分享vite+vue3不清除浏览器缓存直接下载最新代码的解决方案,感兴趣的朋友一起看看吧
2024-06-06
vue动态子组件的两种实现方式
这篇文章主要介绍了vue动态子组件的两种实现方式,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-09-09

Vue IP地址输入框实例代码

Vue IP地址输入框

补充：Vue3实现IP地址输入框

前言

使用方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具