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: {// 双向数据绑定的valuehandler: 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-255checkIpVal (item) {//确保每个值都处于0-255let 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>

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

vue3+ts+element封装一个简易的curd
vue3+ts+element封装一个简易的curd 闲来无趣做一个简单的table封装,不喜勿喷首先创建一个公共的Table.vue/pagination.vue文件 Table.vue < ...
vue+element 封装公共js代码
一.多个 js 方法,不想用 vue.prototype 二.使用Vue.prototype 封装公共 js 三.封装的方法较多,又想通过this.直接调用一.多个 js 方法,不想用 vue.pr ...
一个用于伪造IP地址进行爆破的BurpSuite插件：BurpFakeIP
BurpFakeIP介绍一个用于伪造ip地址进行爆破的BurpSuite插件,burpsuite伪造ip可用于突破waf及进行安全规则绕过等场景:昨天我们分享了<BurpSuite IP代理扩 ...
基于vue element 封装上传组件
基于vue element封装的上传组件使用方法: 1.首先引入该组件 2.注册组件 3.页面使用 4.回调函数(如需其他回调自行封装因为我暂时没用到其他的哈哈哈) <template& ...
计算机网络题目：一个网络的IP地址为193.12.5.0/24。请写出这个网络的直接广播地址、受限广拍地址与这个网络上的特定主机地址,回送地址
题目: 一个网络的IP地址为193.12.5.0/24.请写出这个网络的直接广播地址.受限广拍地址与这个网络上的特定主机地址,回送地址直接广播地址:192.12.5.255 受限广播地址:255.2 ...
ip地址管理系统java,一个容易的IP地址管理系统源代码
一个简单的IP地址管理系统源代码软件编程牛人网 import java.io.BufferedOutputStream; import java.io.BufferedReader; import ...
使用vue+element开发一个谷歌插件
简单功能:点击浏览器右上角插件icon弹出小弹窗,点击设置弹出设置页,并替换背景颜色. 这里使用vue+element并不是说写插件引用各种库才好,而是为了演示而使用. 开始 1.本地创建文件夹tes ...
vue项目打包后直接修改ip地址
在 Vue 项目的配置文件中可以设置 devServer.host 属性来指定开发服务器的主机名.打包后的项目文件中并不包含该配置,所以需要使用其他方式来修改 IP 地址. 一种方法是在本地的 hos ...
用java程序编写ip仿真器_用java 编写一个可以实现IP地址查询功能的课程设计
展开全部下面是获得本机IP地址的方法,跟你的程序捆绑起来,互相发送消息的时候直接将IP发送过去 private static String[] getAllLocalHostIP(){ 323131 ...

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

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

最新文章

热门文章