vue中使用element绘制一个Ip输入框组件

深夜的星星 深夜的星星 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 3.5k累计阅读 3.5k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄7年
关注
原创 2022-10-10 13:20:05 3.5k 阅读 AI 写同款· GEO 优化 ›
【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 ipAddre 阅读详情

今天无聊写了一个可以控制不同大小的Ip输入框组件

使用

在这里插入图片描述

呈现

在这里插入图片描述

<template>
  <div>
    <div :class="dynamicSetIpBoxStyle">
      <el-input v-model.number="ip1"
                maxlength='3' ref='ip1'
                :class="dynamicSetIpInputStyle"
                onkeyup="value=value.replace(/[^\d]/g,'')"
                @keyup.native="keyupEvent(1,$event)"
                @blur="submitIp"
                @input="(val) => handleInpIp(val,'ip1')"
                :size="inputSize"></el-input>
      <span class="dot">.</span>
      <el-input v-model.number="ip2"
                maxlength='3' ref='ip2'
                :class="dynamicSetIpInputStyle"
                onkeyup="value=value.replace(/[^\d]/g,'')"
                @keyup.native="keyupEvent(2,$event)"
                @blur="submitIp"
                @input="(val) => handleInpIp(val,'ip2')"
                :size="inputSize"></el-input>
      <span class="dot">.</span>
      <el-input v-model.number="ip3"
                maxlength='3' ref='ip3'
                :class="dynamicSetIpInputStyle"
                onkeyup="value=value.replace(/[^\d]/g,'')"
                @keyup.native="keyupEvent(3,$event)"
                @blur="submitIp"
                @input="(val) => handleInpIp(val,'ip3')"
                :size="inputSize"></el-input>
      <span class="dot">.</span>
      <el-input v-model.number="ip4"
                maxlength='3' ref='ip4'
                :class="dynamicSetIpInputStyle"
                onkeyup="value=value.replace(/[^\d]/g,'')"
                @keyup.native="keyupEvent(4,$event)"
                @blur="submitIp"
                @input="(val) => handleInpIp(val,'ip4')"
                :size="inputSize"></el-input>
      <i class="el-icon-circle-close" :class="dynamicSetCircleCloseStyle" @click="clearValue"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "IpModel",
  model:{
    prop:"value",
    event:"change",
  },
  props:{
    //inputSize  根element是size一样  有三种选择  mini small medium
    inputSize:{
      type:String,
      default:""
    },
    //boxWidth 三种选择  miniWidth  smallWidth  mediumWidth  不满足样式请自定义样   如下style
    boxWidth:String,
    value:String,
    echoIp:String
  },
  data() {
    return {
      ip1: null,
      ip2: null,
      ip3: null,
      ip4: null,
      //默认样式
      dynamicSetIpBoxStyle:'ipBoxSmall',
      dynamicSetIpInputStyle:'ipinputSmall',
      dynamicSetCircleCloseStyle:'closeSmall'
    };
  },
  created() {
    if(this.boxWidth === 'miniWidth'){
      this.dynamicSetIpBoxStyle = 'ipBoxMini';
      this.dynamicSetIpInputStyle = 'ipinputMini';
      this.dynamicSetCircleCloseStyle = 'closeMini';
    }
    if(this.boxWidth === 'mediumWidth'){
      this.dynamicSetIpBoxStyle = 'ipBoxMedium';
      this.dynamicSetIpInputStyle = 'ipinputMedium';
      this.dynamicSetCircleCloseStyle = 'closeMedium';
    }
    //自定义样式在这里配置
    if(this.boxWidth === 'scanWidth'){
      this.dynamicSetIpBoxStyle = 'ipBoxScan';
      this.dynamicSetIpInputStyle = 'ipinputScan';
      this.dynamicSetCircleCloseStyle = 'closeScan';
    }
  },
  watch:{
    echoIp:{
      handler(val){
        if(val){
          let ipList = val.split('.');
          this.ip1 = ipList[0];
          this.ip2 = ipList[1];
          this.ip3 = ipList[2];
          this.ip4 = ipList[3];
          this.$emit("change",val)
        }
      }
    },
    value:{
      handler(val){
        if(val !== null && val !== undefined){
          let ipList = val.split('.');
          this.ip1 = ipList[0];
          this.ip2 = ipList[1];
          this.ip3 = ipList[2];
          this.ip4 = ipList[3];
        }else {
          this.ip1 = null;
          this.ip2 = null;
          this.ip3 = null;
          this.ip4 = null;
        }
        if(this.ip1 != null && this.ip2 != null && this.ip3 != null && this.ip4 != null) {
          let echo =  this.ip1+'.'+this.ip2+'.'+this.ip3+'.'+this.ip4
          this.$emit("change",echo)
        }
      },
    },

  },
  computed: {
    isRightVal () {
      //判断填入的四个ip值是否为数字，只有有一个为非数字则为true
      let reg = /[^\d]/g;
      return reg.test(this.ip1) || reg.test(this.ip2) || reg.test(this.ip3) || reg.test(this.ip4);
    }
  },
  methods: {
    //监听键盘
    keyupEvent (index,e) {
      //按下.键跳到下一个输入框（同理可做出其他按键的跳转输入框）
      if (e.keyCode === 110 || e.keyCode === 190) {//不同键盘键位对应 . 的值 87键->190  104键->110
        //这里尝试过用this.focusInput发现没有效果（具体原因暂未知....）,待你们完善
        if (index == 1) {
          this.$nextTick(() => {
            this.$refs.ip2.focus();
          });
        } else if (index == 2) {
          this.$nextTick(() => {
            this.$refs.ip3.focus();
          });
        } else {
          this.$nextTick(() => {
            this.$refs.ip4.focus();
          });
        }
      }
    },
    //到失去输入框焦点时
    submitIp () {
      //失去焦点判断值是否输入完整，并向父组件传整个ip值
      if(this.ip1 !=null && this.ip2 != null && this.ip3 != null && this.ip4 != null) {
        if (this.isRightVal) {
          //这里也可以加个提示框之类的提示用户
          this.clearValue();
        }else {
          let ipVal = this.ip1 + '.' + this.ip2 + '.' + this.ip3 + '.' + this.ip4;
          if (this.ip4 == 0 || this.ip4 == 255 || this.ip1 == 0 || this.ip1 == 255) {
            this.$message.error(ipVal + "-为保留ip")
            return;
          }
          this.$emit('change', ipVal);
          this.$parent.$emit("el.form.change"); //这是防止elementui的form表单验证必填项时显示文字的也就是required,用不到可不写
        }
      }else {
        return;
      }
    },
    //输入的值
    handleInpIp(val, key) {
      //输入数据时  就显示图标
      //当一个表单   多次使用该组件   会使getElementsByClassName获取多个class   暂时不知道怎么去判断    你们可以去完善
     // document.getElementsByClassName(this.dynamicSetCircleCloseStyle).item(0).style.display = 'inline-block';
      //判断输入的ip值  0和255位保留ip  不使用
      if(parseInt(val) > 254) {
        //这里使用 this.focusInput()  发现没有效果，不能跳到下一个输入框（具体原因暂未知....）   留给你们去研究  研究清楚了  记得补充..............
        //补充：
        //输入值超过255，则显示为254，并且跳到下一个输入框
        switch(key) {
          case "ip1":
            this.ip1 = 254;
            this.$refs.ip2.focus();
            break;
          case "ip2":
            this.ip2 = 254;
            this.$refs.ip3.focus();
            break;
          case "ip3":
            this.ip3 = 254;
            this.$refs.ip4.focus();
            break;
          case "ip4":
            this.ip4 = 254;
            break;
          default:
            break;
        }
      }else if(parseInt(val) <= 254 && parseInt(val) >= 100){
        //输入三位数自动跳到下一个输入值
        switch(key) {
          case "ip1":
            this.$refs.ip2.focus();
            break;
          case "ip2":
            this.$refs.ip3.focus();
            break;
          case "ip3":
            this.$refs.ip4.focus();
            break;
          default:
            break;
        }
      }
    },

    clearValue () {
      //重置ip输入框
      this.ip1 = null;
      this.ip2 = null;
      this.ip3 = null;
      this.ip4 = null;
      this.$emit('getIpVal',''); //清除输入框传空值
      //清空输入框时，隐藏图标  当多次使用该组件时    会有多个class不能指定对应点击的class，未达到效果，待你们完善
      // document.getElementsByClassName(this.dynamicSetCircleCloseStyle).item(0).style.display = 'none';
    },
  },


}
</script>

<style scoped lang='less'>
.dot {
  display: inline-block;
  width: 4px;
  height: 100%;
  line-height: 50%;
}
/***********   medium样式 为默认样式   **********/
.ipBoxMedium{
  border: 1px solid #ccc;
  display: inline-block;
  border-radius: 5px;
  line-height: 0px;
  position: relative;
  top: 0;
  left: 0;
}
.ipinputMedium{
  display: inline-block;
  width: 65px;
  /deep/ .el-input__inner {
    border: 0;
  }
  font-size: 16px;
}
.closeMedium{
  display: none;
  font-size: 12px;
  cursor: pointer;
  position: absolute;
  right:0px;
  top: 12px;
}
&:hover {
  .closeMedium{
    display: inline-block;
  }
}
/***********   small样式    **********/
.ipBoxSmall{
  border: 1px solid #ccc;
  display: inline-block;
  border-radius: 5px;
  line-height: 0px;
  width: 216px;
  position: relative;
  top: 0;
  left: 0;
}
.ipinputSmall{
  display: inline-block;
  width: 50px;
  /deep/ .el-input__inner {
    padding: 0 10px;
    text-align: center;
    border: 0;
  }
  font-size: 14px;
}
.closeSmall{
  display: none;
  font-size: 12px;
  cursor: pointer;
  position: absolute;
  right:0px;
  top: 13px;
}
&:hover {
  .closeSmall{
    display: inline-block;
  }
}
/***********   mini样式    **********/
.ipBoxMini{
  border: 1px solid #ccc;
  display: inline-block;
  border-radius: 5px;
  line-height: 0px;
  width: 192px;
  position: relative;
  top: 0;
  left: 0;
}
.ipinputMini{
  display: inline-block;
  width: 44px;
  /deep/ .el-input__inner {
    padding:2px;
    text-align: center;
    border: 0;
  }
  font-size: 14px;

}
.closeMini{
  display: none;
  font-size: 12px;
  cursor: pointer;
  position: absolute;
  right:0px;
  top: 12px;
}
&:hover {
  .closeMini{
    display: inline-block;
  }
}
/***********   IP扫描样式    **********/
.ipBoxScan{
  border: 1px solid #ccc;
  display: inline-block;
  border-radius: 6px;
  line-height: 0px;
  width: 190px;
  position: relative;
  top: 0;
  left: 0;
}
.ipinputScan{
  display: inline-block;
  width: 44px;
  /deep/ .el-input__inner {
    padding:2px;
    //text-align: center;
    border: 0;
  }
  font-size: 14px;

}
.closeScan{
  display: none;
  font-size: 8px;
  cursor: pointer;
  position: absolute;
  right:0px;
  top: 8px;
}
//页面显示时就显示
&:hover {
  .closeScan{
    display: inline-block;
  }
}
</style>

通过动态控制class，使用样式，已达到不同效果！
需要完善的就在后面留言吧！！！
————————————————————————————————————————————————————————
完善

<template>
  <div>
    <div :class="dynamicSetIpBoxStyle">
      <el-input v-model.number="ip1"
                maxlength='3' ref='ip1'
                :class="dynamicSetIpInputStyle"
                onkeyup="value=value.replace(/[^\d]/g,'')"
                @keyup.native="keyupEvent(1,$event)"
                @blur="submitIp"
                @input="(val) => handleInpIp(val,'ip1',circleId)"
                :size="inputSize"></el-input>
      <span class="dot">.</span>
      <el-input v-model.number="ip2"
                maxlength='3' ref='ip2'
                :class="dynamicSetIpInputStyle"
                onkeyup="value=value.replace(/[^\d]/g,'')"
                @keyup.native="keyupEvent(2,$event)"
                @blur="submitIp"
                @input="(val) => handleInpIp(val,'ip2',circleId)"
                :size="inputSize"></el-input>
      <span class="dot">.</span>
      <el-input v-model.number="ip3"
                maxlength='3' ref='ip3'
                :class="dynamicSetIpInputStyle"
                onkeyup="value=value.replace(/[^\d]/g,'')"
                @keyup.native="keyupEvent(3,$event)"
                @blur="submitIp"
                @input="(val) => handleInpIp(val,'ip3',circleId)"
                :size="inputSize"></el-input>
      <span class="dot">.</span>
      <el-input v-model.number="ip4"
                maxlength='3' ref='ip4'
                :class="dynamicSetIpInputStyle"
                onkeyup="value=value.replace(/[^\d]/g,'')"
                @keyup.native="keyupEvent(4,$event)"
                @blur="submitIp"
                @input="(val) => handleInpIp(val,'ip4',circleId)"
                :size="inputSize"></el-input>
      <i class="el-icon-circle-close" :class="dynamicSetCircleCloseStyle" :id="circleId" @click="clearValue(circleId)"></i>
    </div>
  </div>
</template>

<script>
//引入nanoid 解决生产不同的id
import {nanoid} from 'nanoid'
export default {
  name: "IpModel",
  model:{
    prop:"value",
    event:"change",
  },
  props:{
    //inputSize  根element是size一样  有三种选择  mini small medium
    inputSize:{
      type:String,
      default:""
    },
    //boxWidth 三种选择  miniWidth  smallWidth  mediumWidth  不满足样式请自定义样   如下style
    boxWidth:String,
    value:String,
    echoIp:String
  },
  data() {
    return {
      ip1: null,
      ip2: null,
      ip3: null,
      ip4: null,
      circleId:'',
      //默认样式
      dynamicSetIpBoxStyle:'ipBoxSmall',
      dynamicSetIpInputStyle:'ipinputSmall',
      dynamicSetCircleCloseStyle:'closeSmall'
    };
  },
  created() {
    this.circleId = nanoid();
    if(this.boxWidth === 'miniWidth'){
      this.dynamicSetIpBoxStyle = 'ipBoxMini';
      this.dynamicSetIpInputStyle = 'ipinputMini';
      this.dynamicSetCircleCloseStyle = 'closeMini';
    }
    if(this.boxWidth === 'mediumWidth'){
      this.dynamicSetIpBoxStyle = 'ipBoxMedium';
      this.dynamicSetIpInputStyle = 'ipinputMedium';
      this.dynamicSetCircleCloseStyle = 'closeMedium';
    }
    //自定义样式在这里配置
    if(this.boxWidth === 'scanWidth'){
      this.dynamicSetIpBoxStyle = 'ipBoxScan';
      this.dynamicSetIpInputStyle = 'ipinputScan';
      this.dynamicSetCircleCloseStyle = 'closeScan';
    }
  },
  watch:{
    echoIp:{
      handler(val){
        if(val){
          //当有值时，显示
          document.getElementById(this.circleId).style.display = 'inline-block';
          let ipList = val.split('.');
          this.ip1 = ipList[0];
          this.ip2 = ipList[1];
          this.ip3 = ipList[2];
          this.ip4 = ipList[3];
          this.$emit("change",val)
        }
      }
    },
    value:{
      handler(val){
        if(val !== null && val !== undefined){
          let ipList = val.split('.');
          this.ip1 = ipList[0];
          this.ip2 = ipList[1];
          this.ip3 = ipList[2];
          this.ip4 = ipList[3];
        }else {
          this.ip1 = null;
          this.ip2 = null;
          this.ip3 = null;
          this.ip4 = null;
        }
        if(this.ip1 != null && this.ip2 != null && this.ip3 != null && this.ip4 != null) {
          let echo =  this.ip1+'.'+this.ip2+'.'+this.ip3+'.'+this.ip4
          this.$emit("change",echo)
        }
      },
    },

  },
  computed: {
    isRightVal () {
      //判断填入的四个ip值是否为数字，只有有一个为非数字则为true
      let reg = /[^\d]/g;
      return reg.test(this.ip1) || reg.test(this.ip2) || reg.test(this.ip3) || reg.test(this.ip4);
    }
  },
  methods: {
    //监听键盘
    keyupEvent (index,e) {
      //按下.键跳到下一个输入框（同理可做出其他按键的跳转输入框）
      if (e.keyCode === 110 || e.keyCode === 190) {//不同键盘键位对应 . 的值 87键->190  104键->110
        //这里尝试过用this.focusInput发现没有效果（具体原因暂未知....）,待你们完善
        if (index == 1) {
          this.$nextTick(() => {
            this.$refs.ip2.focus();
          });
        } else if (index == 2) {
          this.$nextTick(() => {
            this.$refs.ip3.focus();
          });
        } else {
          this.$nextTick(() => {
            this.$refs.ip4.focus();
          });
        }
      }
    },
    //到失去输入框焦点时
    submitIp () {
      //失去焦点判断值是否输入完整，并向父组件传整个ip值
      if(this.ip1 !=null && this.ip2 != null && this.ip3 != null && this.ip4 != null) {
        if (this.isRightVal) {
          //这里也可以加个提示框之类的提示用户
          this.clearValue();
        }else {
          let ipVal = this.ip1 + '.' + this.ip2 + '.' + this.ip3 + '.' + this.ip4;
          if (this.ip4 == 0 || this.ip4 == 255 || this.ip1 == 0 || this.ip1 == 255) {
            this.$message.error(ipVal + "-为保留ip")
            return;
          }
          this.$emit('change', ipVal);
          this.$parent.$emit("el.form.change"); //这是防止elementui的form表单验证必填项时显示文字的也就是required,用不到可不写
        }
      }else {
        return;
      }
    },
    //输入的值
    handleInpIp(val, key,cid) {
      //输入数据时  就显示图标
      //当一个表单   多次使用该组件   会使getElementsByClassName获取多个class   暂时不知道怎么去判断    你们可以去完善
      //已解決  使用id
       document.getElementById(cid).style.display = 'inline-block';
      //判断输入的ip值  0和255位保留ip  不使用
      if(parseInt(val) > 254) {
        //这里使用 this.focusInput()  发现没有效果，不能跳到下一个输入框（具体原因暂未知....）   留给你们去研究  研究清楚了  记得补充..............
        //补充：
        //输入值超过255，则显示为254，并且跳到下一个输入框
        switch(key) {
          case "ip1":
            this.ip1 = 254;
            this.$refs.ip2.focus();
            break;
          case "ip2":
            this.ip2 = 254;
            this.$refs.ip3.focus();
            break;
          case "ip3":
            this.ip3 = 254;
            this.$refs.ip4.focus();
            break;
          case "ip4":
            this.ip4 = 254;
            break;
          default:
            break;
        }
      }else if(parseInt(val) <= 254 && parseInt(val) >= 100){
        //输入三位数自动跳到下一个输入值
        switch(key) {
          case "ip1":
            this.$refs.ip2.focus();
            break;
          case "ip2":
            this.$refs.ip3.focus();
            break;
          case "ip3":
            this.$refs.ip4.focus();
            break;
          default:
            break;
        }
      }
    },

    clearValue (cid) {
      //重置ip输入框
      this.ip1 = null;
      this.ip2 = null;
      this.ip3 = null;
      this.ip4 = null;
      this.$emit('getIpVal',''); //清除输入框传空值
      //清空输入框时，隐藏图标  当多次使用该组件时    会有多个class不能指定对应点击的class，未达到效果，待你们完善
      //已解決
      document.getElementById(cid).style.display = 'none';
    },
  },


}
</script>

<style scoped lang='less'>
.dot {
  display: inline-block;
  width: 4px;
  height: 100%;
  line-height: 50%;
}
/***********   medium样式 为默认样式   **********/
.ipBoxMedium{
  border: 1px solid #ccc;
  display: inline-block;
  border-radius: 5px;
  line-height: 0px;
  position: relative;
  top: 0;
  left: 0;
}
.ipinputMedium{
  display: inline-block;
  width: 65px;
  /deep/ .el-input__inner {
    border: 0;
  }
  font-size: 16px;
}
.closeMedium{
  display: none;
  font-size: 12px;
  cursor: pointer;
  position: absolute;
  right:0px;
  top: 12px;
}
//&:hover {
//  .closeMedium{
//    display: inline-block;
//  }
//}
/***********   small样式    **********/
.ipBoxSmall{
  border: 1px solid #ccc;
  display: inline-block;
  border-radius: 5px;
  line-height: 0px;
  width: 216px;
  position: relative;
  top: 0;
  left: 0;
}
.ipinputSmall{
  display: inline-block;
  width: 48px;
  /deep/ .el-input__inner {
    padding: 0 10px;
    text-align: center;
    border: 0;
  }
  font-size: 14px;
}
.closeSmall{
  display: none;
  font-size: 12px;
  cursor: pointer;
  position: absolute;
  right:0px;
  top: 13px;
}
//&:hover {
//  .closeSmall{
//    display: inline-block;
//  }
//}
/***********   mini样式    **********/
.ipBoxMini{
  border: 1px solid #ccc;
  display: inline-block;
  border-radius: 5px;
  line-height: 0px;
  width: 192px;
  position: relative;
  top: 0;
  left: 0;
}
.ipinputMini{
  display: inline-block;
  width: 44px;
  /deep/ .el-input__inner {
    padding:2px;
    text-align: center;
    border: 0;
  }
  font-size: 14px;

}
.closeMini{
  display: none;
  font-size: 12px;
  cursor: pointer;
  position: absolute;
  right:0px;
  top: 12px;
}
//&:hover {
//  .closeMini{
//    display: inline-block;
//  }
//}
/***********   IP扫描样式    **********/
.ipBoxScan{
  border: 1px solid #ccc;
  display: inline-block;
  border-radius: 6px;
  line-height: 0px;
  width: 190px;
  position: relative;
  top: 0;
  left: 0;
}
.ipinputScan{
  display: inline-block;
  width: 44px;
  /deep/ .el-input__inner {
    padding:2px;
    //text-align: center;
    border: 0;
  }
  font-size: 14px;

}
.closeScan{
  display: none;
  font-size: 8px;
  cursor: pointer;
  position: absolute;
  right:0px;
  top: 8px;
}
//页面显示时就显示
//&:hover {
//  .closeScan{
//    display: inline-block;
//  }
//}

</style>
标签
#vue.js #前端 #elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
封装vue2+element上传组件 vue2+element上传组件封装 阅读详情

相关推荐

VUE+Element-ui中，在添加表单中嵌套了两个组件，每个组件中都有输入款，如何给嵌套组件输入框加必填项规则？

🏆本文收录于 《全栈Bug调优(实战版)》 专栏，该专栏专注于分享我在真实项目开发中遇到的各类疑难Bug及其深层成因，并系统提供高效、可复现的解决思路和实操方案。无论你是刚入行的新手开发者，还是拥有多年项目经验的资深工程师，本专栏都将为你提供一条系统化、高质量的问题排查与优化路径，助力你加速成长，攻克技术壁垒，迈向技术价值最大化与职业发展的更高峰🚀！

**My Coding Family** 1050

vue2-elementui-IP输入框组件

IP校验src/utils/validate.js。自定义指令number。

samo9527的博客 1802

vue-ip-input-由vuejs实现的ip输入。-Vue.js开发

vue-ip-input vue 2.0的ip输入工具演示用法用法安装npm install vue-ip-input --save CommonJS var VueIpInput = require（'vue-ip-input'vue-ip-input vue的ip输入工具2.0演示演示用法安装npm install vue-ip-input --save CommonJS var VueIpInput = require（'vue-ip-input'）;新的Vue（{组件：{'vue-ip-input'：VueIpInput}，数据： function（）{return {ip：'127.0.0.1'};}，方法：{onIpChange：function（ip）{console.log（'ip input change：'，ip）;}，onIpBlur：function（ip）{ console.log（'i

【前端小点】Vue3中的IP输入框组件

使用vue3写ip输入框组件

球球博客 2140

vue项目移动端实现ip输入框问题

vue框架移动端做ip输入框组件，input在浏览器和微信端兼容问题。 要求：只能输入数字，输入数字以外的字符（包括点、冒号等数字符号）时自动跳到下一段ip输入框. type=number类型，不会禁止点的输入。手动过滤拿不到包括点字符的字符串.而且输入多个点之后，拿到的值为空. 解决办法：type=tel,只能输入数字，且可以获取到点字符的输入 问题：微信下keyup事件无效，回调事件中event.keyCode返回全是229. 解决办法：监听input事件，event事件对象中keycode为空，但是event.data返回输入字符，可以实现过滤. <

win 11bitlocker恢复密匙一般情况的解决方式（这里指的是你现在使用的微软账户一直没有变更过）

本来没有打算写这一篇解决帖子的，但是最近好多微博的友友都在私我询问解决方法，孩子虽然很热心，但是真的回复不过来了，打字太累了，这里给大家简单指个路，希望能够对大家有所帮助。 当时出现这个问题的时候，一搜网上的解决方法都是重装系统什么的，真是吓死孩子啦。后来去微软的官网倒腾了半天解决了问题。其实只要你没有改过微软账户，你可以直接试试我这个方法，大概三到五分钟解决问题吧。 和我情况不一样的也可以参考一下贴吧里一些大佬的分享，或者实在着急我感觉去淘宝上找个解决也不是未尝不可。 出现问题: 解决方案: 直接去微软

zhiqingxue的博客 2万+

基于vue+element的ip格式输入框组件

基于vue+element的ip格式输入组件，且支持 （1）输入.时，自动跳入下一输入框； （2）按下backspace删除键，自动回退到上一输入框 （3）任意位置复制、粘贴ip

杨丫丫的专栏 1443

来！简单了解一下计算机发展史！

​ 1936年，英国数学家阿兰・麦席森・图灵提出了一种抽象的计算模型——图灵机( Turing machine)。图灵机，又称图灵计算机，即将人们使用纸笔进行数学运算的过程进行抽象，由一个虚拟的机器替代人类进行数学运算。​ 图灵机是一个抽象的机器，它有一条无限长的纸带，纸带分成了一个一个的小方格，每个方格有不同的颜色。有一个机器头在纸带上移来移去。机器头有一组内部状态，还有一些固定的程序。

m0_57290404的博客 2905

vue3 element-plus IP地址输入框

vue3 ts setup ip地址输入框

qq_27327279的博客 2952

LEfSe分析避坑指南：如何解决R语言中的常见错误与优化结果可视化

本文提供了R语言中进行LEfSe（线性判别分析）微生物组差异分析的全流程避坑指南。详细解析了从数据格式准备、参数调优（如显著性水平与LDA阈值）、结果可靠性验证到使用ggplot2进行高级可视化的实战技巧，帮助用户规避常见错误，获得更稳健、美观的分析结果。

weixin_29098391的博客 361

创客学院嵌入式驱动开发——学习资料汇总

1.创客学院知识巩固-01C语言回顾_C/C++_Set_Mode的博客-优快云博客https://blog.csdn.net/Set_Mode/article/details/94431050 2.创客学院知识巩固-02数据结构_Set_Mode的博客-优快云博客https://blog.csdn.net/Set_Mode/article/details/94431087 3.创客学院知...

snaking616 5116

vue使用element-ui的上传，input输入框，单选多选按钮等组件

1.引入element-ui --- 复选框+上传+输入框 // element-ui import {Checkbox, Input, Upload, CheckboxGroup } from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.component( 'checkbox', Checkbox ); ...

Lotus的博客 8979

Java对接海康威视明眸门禁设备

海康威视合作生态致力打造一个能力开放体系、两个生态圈，Hikvision AI Cloud开放平台是能力开放体系的核心内容。它是海康威视基于多年在视频及物联网核心技术积累之上，融合AI、大数据、云计算等技术，为合作伙伴提供的一个二次开发及创新的平台。的SDK复制到linux的lib目录下（如果是docker发布，记得做好共享映射哦）大家有没有想过，windows版的SDK为什么要复制到项目根目录的lib文件夹下？所以发布到linux的时候，我们需要将。打开AcsMain文件。................

Good Luck 7875

【基于element组件封装的ip输入框】Vue2支持ipv4和ipv6的输入粘贴框

基于element组件封装的ip地址输入框

Wuyo_7的博客 931

VC Spyglass：Lint实战指南之TCL脚本自动化解析

本文详细介绍了如何利用TCL脚本实现VC Spyglass Lint检查的自动化流程。通过实战指南，从基础脚本编写到高级参数化技巧，帮助数字IC设计工程师摆脱手动操作，提升验证效率，并实现与CI/CD流程的集成。

h3i4j的博客 796

基金估值核算系统三国杀：恒生 VS 赢时胜 VS 融选！

本文对比分析了恒生电子、赢时胜和融选科技三家金融科技公司的基金估值系统。恒生电子作为行业龙头，在公募基金领域占据较大份额，其新一代估值系统6.0采用微服务架构，自动化程度高；赢时胜在中型公募和券商资管领域优势明显，其V5.5系统在信创适配和复杂产品处理方面表现突出；融选科技作为新兴厂商，提供轻量化解决方案，适合中小型机构。文章从市场格局、系统定位、技术架构、成本构成和用户反馈五个维度进行深入比较，为金融机构选型提供参考。当前估值系统市场呈现"三国鼎立"格局，各具特色，选型需结合机构规模、

magbox520的博客 826

基于vue3.0和element-plus的IP地址输入框

<template> <div class="my_ip_address_input"> <el-input v-model="ipAddress[0]" @keyup="handleChange" oninput="value=value.replace(/[^\d]/g,'')&&value>255?255:value"/> <span>.</span&

qq_43731674的博客 1482

文档：亲测可用解决vnc灰屏，黑屏，鼠标大黑叉情况

主要解决vnc-viewer灰屏，黑屏，鼠标大黑叉等现象，详细见文档。

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

输入ip地址，输完自己切换到一下输入框，校验IP的准确性。

m0_49016709的博客 1023

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

element-ui实现ip输入框

这个输入框分为4个部分，前面的框满了3个数字后自动跳到后面的框，并且支持复制如'127.0.0.1'这样的ip。 代码如下： <template> <el-popover ref="popoverInput" :content="tips" :max-width="tipsMaxWidth" :placement="tipsPlacement" :show-html="true" :offset-placement="tipsO..

weixin_42077503的博客 3837

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目，保存在这里方便以后使用直接下载

vue结合elementui实现ip输入框

不多说直接上代码： <template> <div class="ip-box"> <el-input v-model="ip1" name="ip" maxlength="3" onkeyup="value=value.replace(/[^\d]/g,'')" @keyup.native="keyupEvent(1,$event)" @blur="submitIp" @input="(val) => checkVal(val,'ip1')" ref="ip1"&

weixin_45766506的博客 3630

vue中input多选_vue使用element-ui的上传，input输入框，单选多选按钮等组件

1.引入element-ui --- 复选框+上传+输入框// element-uiimport {Checkbox, Input, Upload, CheckboxGroup } from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.component( 'checkbox', Checkbox );Vue.com...

weixin_34010461的博客 1414

vue3封装 ip地址输入框

【代码】vue3封装 ip地址输入框。

qq_42351255的博客 1461

vue3语法封装element中的upload上传组件

vue3语法 1.1 upload组件 <!-- * @Author: lijie * @Date: 2021-06-10 16:21:09 * @LastEditTime: 2021-06-22 16:56:54 * @LastEditors: lijie * @Description: 上传 组件 * @FilePath: \code\fe-web-message\src\components\Upload\index.vue --> <template> &lt

JCat的博客 5330

【IP地址】输入小数点，自动移到下一输入框

输入框最多只能输入三位数字（0-255），按下小数点(.) 光标会自动跳转到下一个输入框。

stay hungry, stay foolish 1322

Element ui 使用upload 读取本地文件并填充到输入框内

目录 一、问题背景 二、解决方案 具体思路 代码示例 示例效果 一、问题背景 最近在写vue项目的时候需要一个组件来读取本地中的json文件并将内容填充到输入框中。并且最后需要对json格式做校验。 二、解决方案 由于浏览器不能使用js直接读取文件，因此考虑使用element ui 中的upload组件获取文件信息，然后使用js 中的fileReader读取文件内容。 具体思路 1）使用upload组件读取文件信息。 2）使用js中的fileR...

MonkeyCatFox的博客 5153
上一篇： 使用Git就记这几个命令
点赞 1
评论 4
书签 书签 10
深夜的星星
深夜的星星
博客等级 码龄7年 9粉丝 27原创
+ 关注
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值