Vue 自定义ip地址输入组件

news2024/11/15 11:05:22

实现效果:

组件代码

<template>
  <div class="ip-input flex flex-space-between flex-center-cz">
    <input type="text" v-model="value1" maxlength="3" ref="ip1" :placeholder="placeholder" @input="changeToNext1(value1)"/>
    ·
    <input type="text" v-model="value2" maxlength="3" ref="ip2" :placeholder="placeholder" @input="changeToNext2(value2)"/>
    ·
    <input type="text" v-model="value3" maxlength="3" ref="ip3" :placeholder="placeholder" @input="changeToNext3(value3)"/>
    ·
    <input type="text" v-model="value4" maxlength="3" ref="ip4" :placeholder="placeholder" @input="ipAddress"/>
  </div>
</template>

<script>
export default {
  name:'IPInput',
  props:{
    placeholder:{},
    ip: {}
  },
  model: {
    prop: "ip",
    event: "change"
  },
  created(){
  },
  watch:{
    ip: {
      handler(newVal) {
        let arr = newVal.split(".")
        if ( arr.length === 4 ) {
          this.value1 = arr[0]
          this.value2 = arr[1]
          this.value3 = arr[2]
          this.value4 = arr[3]
        }
        if ( newVal === "..." ) {
          this.$emit("change", '')
        }
      },
      deep: true
    }
  },
  mounted() {
    if (this.ip == null) return;
    let arr = this.ip.split(".")
    if ( arr.length === 4 ) {
      this.value1 = arr[0]
      this.value2 = arr[1]
      this.value3 = arr[2]
      this.value4 = arr[3]
      this.$emit("change", this.value1 + "." + this.value2 + "." + this.value3 + "." + this.value4)
    }
  },
  data() {
    return {
      value1: '',
      value2: '',
      value3: '',
      value4: '',
    }
  },
  methods:{
    ipAddress() {
      this.$emit("change", this.value1 + "." + this.value2 + "." + this.value3 + "." + this.value4);
    },
    changeToNext1(v) {
      if (v.toString().length === 3) {
        this.$nextTick(() => {
          this.$refs.ip2.focus();
        });
      }
      this.$emit("change", this.value1 + "." + this.value2 + "." + this.value3 + "." + this.value4);
    },
    changeToNext2(v) {
      if (v.toString().length === 3) {
        this.$nextTick(() => {
          this.$refs.ip3.focus();
        });
      }
      this.$emit("change", this.value1 + "." + this.value2 + "." + this.value3 + "." + this.value4);
    },
    changeToNext3(v) {
      if (v.toString().length === 3) {
        this.$nextTick(() => {
          this.$refs.ip4.focus();
        });
      }
      this.$emit("change", this.value1 + "." + this.value2 + "." + this.value3 + "." + this.value4);
    }
  }
}
</script>

<style scoped>

.ip-input {
  box-sizing: border-box;
  border: 1px solid #E1DCDC;
  height: 28px;
  background-color: #FFFFFF;
}
.ip-input input {
  border: 0;
  width: 100%;
  text-align: center;
}

</style>

组件使用代码

<template>
  <div class="root flex flex-col border-box padding-l">
    <IpInput v-model="ip" style="width: 200px;"></IpInput>
  </div>
</template>

<script>
import IpInput from '@/components/input/IpInput.vue'

export default{
  name:'',
  created() {
  },
  components: {IpInput},
  data() {
    return {
      ip:null
    }
  },
  methods:{
  }
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1339614.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Win10 + 4090显卡配置深度学习环境 + gaussian-splatting配置 + 实测自己的场景

目录 1 安装Anaconda 2023.09版本 2 安装CUDA11.8 3 安装深度学习库Cudnn8.6.0 4 安装VSCODE2019 5 安装Colmap3.8 6 安装git 7 安装Python3.10 Pytorch2.0.0 7 安装项目 8 采集数据 8.1 IPhone 14 pro 拍摄30张照片左右 做预处理 8.2 生成colmap位姿等信息 8.3 开…

starrocks集群fe/be节点进程守护脚本

自建starrocks集群&#xff0c;有时候服务会挂掉&#xff0c;无法自动拉起服务&#xff0c;于是采用supervisor进行进程守护。可能是版本的原因&#xff0c;supervisor程序总是异常&#xff0c;无法对fe//be进行守护。于是写了个简易脚本。 #!/bin/bash AppNameFecom.starrock…

Xshell连接ubuntu,从github克隆项目,用Xshell克隆项目

访问不了github&#xff1a;https://blog.csdn.net/liu834189447/article/details/135246914 短暂解决访问问题。 ping不通虚拟机/无法连接虚拟机&#xff1a;https://blog.csdn.net/liu834189447/article/details/135240276 ps: Xshell、ubuntu的粘贴快捷键为 Shift Insert …

日志框架简介-Slf4j+Logback入门实践 | 京东云技术团队

前言 随着互联网和大数据的迅猛发展&#xff0c;分布式日志系统和日志分析系统已广泛应用&#xff0c;几乎所有应用程序都使用各种日志框架记录程序运行信息。因此&#xff0c;作为工程师&#xff0c;了解主流的日志记录框架非常重要。虽然应用程序的运行结果不受日志的有无影…

Android : 画布绘制矩形和文字 让其居中显示简单应用

示例图&#xff1a; CenterView.java package com.example.demo;import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.Log; import android.view.View;public class Center…

c语言用四种方式求解成绩之中最高分和最低分的差值

文章目录 一&#xff0c;题目二&#xff0c;方法1&#xff0c;方法一2&#xff0c;方法二3&#xff0c;方法三4&#xff0c;方法四 三&#xff0c;示例结果 一&#xff0c;题目 最高分最低分之差 输入n个成绩&#xff0c;换行输出n个成绩中最高分数和最低分数的差 输入 : 两行…

利用网络教育系统构建个性化学习平台

在现代教育中&#xff0c;网络教育系统作为一种创新的学习方式&#xff0c;为学生提供了更加个性化和灵活的学习体验。在本文中&#xff0c;我们将通过简单的技术代码&#xff0c;演示如何构建一个基础的网络教育系统&#xff0c;为学生提供个性化的学习路径和资源。 1. 环境…

Undo Log 、Binary Log、Redo Log之间到底有什么区别?

Undo Log 、Binary Log、Redo Log各自的作用 先抛结论&#xff1a;他们各自的作用是什么 Undo Log &#xff1a;用于保证数据库事务原子性Binary Log&#xff1a;用于数据库的数据备份/主从复制Redo Log&#xff1a;用于保证数据库事务持久性 接下来详细谈谈它们 Undo Log …

关于Java并发、JVM面试题

前言 之前为了准备面试&#xff0c;收集整理了一些面试题。 本篇文章更新时间2023年12月27日。 最新的内容可以看我的原文&#xff1a;https://www.yuque.com/wfzx/ninzck/cbf0cxkrr6s1kniv 并发 进程与线程的区别 线程属于进程&#xff0c;进程可以拥有多个线程。进程独享…

【项目】玩具租赁博客测试报告

目录 一、项目背景 二、项目功能 三、功能测试 一、项目背景 玩具租赁系统采用前后端分离的方法来实现&#xff0c;同时使用了数据库来存储相关的数据&#xff0c;同时将其部署到云服务器上。前端主要有十五个页面构成&#xff1a;用户注册、管理员注册、登录页、用户和管理…

java浅拷贝BeanUtils.copyProperties引发的RPC异常 | 京东物流技术团队

背景 近期参与了一个攻坚项目&#xff0c;前期因为其他流程原因&#xff0c;测试时间已经耽搁了好几天了&#xff0c;本以为已经解决了卡点&#xff0c;后续流程应该顺顺利利的&#xff0c;没想到 人在地铁上&#xff0c;bug从咚咚来~ 没有任何修改的服务接口&#xff0c;抛出…

IT安全:实时网络安全监控

了解庞大而复杂的网络环境并非易事&#xff0c;它需要持续观察、深入分析&#xff0c;并对任何违规行为做出快速反应。这就是为什么实时网络安全监控工具是任何组织 IT 安全战略的一个重要方面。 网络攻击和合规性法规是 IT 安全的两个主要驱动因素。同时&#xff0c;数据泄露…

Spring Cloud Gateway 常见过滤器的基本使用

目录 1. 过滤器的作用 2. Spring Cloud Gateway 过滤器的类型 2.1 内置过滤器 2.1.1 AddResponseHeader 2.1.2 AddRequestHeader 2.1.3 PrefixPath 2.1.4 RequestRateLimiter 2.1.5 Retry 2.2 自定义过滤器 1. 过滤器的作用 过滤器通常用于拦截、处理或修改数据流和事…

Springboot+vue的医疗报销系统(有报告),Javaee项目,springboot vue前后端分离项目

演示视频&#xff1a; Springbootvue的医疗报销系统&#xff08;有报告&#xff09;&#xff0c;Javaee项目&#xff0c;springboot vue前后端分离项目 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的医疗报销系统&#xff0c;采用M&#xff08;model&a…

百度沧海文件存储CFS推出新一代Namespace架构

随着移动互联网、物联网、AI 计算等技术和市场的迅速发展&#xff0c;数据规模指数级膨胀&#xff0c;对于分布式文件系统作为大规模数据场景的存储底座提出了更高的要求。已有分布式文件系统解决方案存在着短板&#xff0c;只能适应有限的场景&#xff1a; >> 新型分布式…

【产品经理】axure中继器的使用——表格增删改查分页实现

笔记为个人总结笔记&#xff0c;若有错误欢迎指出哟~ axure中继器的使用——表格增删改查分页实现 中继器介绍总体视图视频预览功能1.表头设计2.中继器3.添加功能实现4.删除功能实现5.修改功能实现6.查询功能实现7.批量删除 中继器介绍 在 Axure RP9 中&#xff0c;中继器&…

IntelliJ IDEA Apache Dubbo,IDEA 官方插件正式发布!

作者&#xff1a;刘军 最受欢迎的 Java 集成开发环境 IntelliJ IDEA 与开源微服务框架 Apache Dubbo 社区强强合作&#xff0c;给广大微服务开发者带来了福音。与 IntelliJ IDEA 2023.2 版本一起&#xff0c;Jetbrains 官方发布了一款全新插件 - Apache Dubbo in Spring Frame…

matlab列优先与高维矩阵重构

由于matlab在列化a(:)以及reshape(a)等操作中是列优先的&#xff0c;所以要重构出新的高维度矩阵&#xff0c;通常要把reshape和permute结合起来使用。 先到 http://caffe.berkeleyvision.org/ 下载 训练好的model bvlc_reference_caffenet.caffemodel; 更多caffe使用也请参看…

C#编程艺术:Fizzler库助您高效爬取www.twitter.com音频

数据是当今数字时代的核心资源&#xff0c;但是从互联网上抓取数据并不容易。本文将教您如何利用C#编程艺术和Fizzler库高效爬取Twitter上的音频数据&#xff0c;让您轻松获取所需信息。 Twitter简介 Twitter是全球最大的社交媒体平台之一&#xff0c;包含丰富的音频资源。用…

机器学习系列--R语言随机森林进行生存分析(1)

随机森林&#xff08;Breiman 2001a&#xff09;&#xff08;RF&#xff09;是一种非参数统计方法&#xff0c;需要没有关于响应的协变关系的分布假设。RF是一种强大的、非线性的技术&#xff0c;通过拟合一组树来稳定预测精度模型估计。随机生存森林&#xff08;RSF&#xff0…