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

已于 2022-10-10 13:20:05 修改
阅读量3k 收藏 10
点赞数 1
文章标签： vue.js 前端 elementui
于 2022-06-23 15:09:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/datajunge/article/details/125427245
版权

今天无聊写了一个可以控制不同大小的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>
深夜的星星
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
vue-ip-input-由vuejs实现的ip输入。-Vue.js开发
05-27
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
Element UI元件库大集合
03-04
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的界面元素和设计模式，以便快速构建美观且响应式的 web 应用。这个"Element UI元件库大集合"资源显然为 Axure 用户提供了方便，使得产品设计...
vue3 element-plus IP地址输入框
qq_27327279的博客
04-15 1556
vue3 ts setup ip地址输入框
vue3 + ts 实现IP地址及Mac地址输入框功能
最新发布
Joy_qxz的博客
05-29 271
将组件中所有的 ['', '', '', lastValue.value] 数组添加两个空值，即改成如下数组。- 将组件中的 isNumberValid 方法修改成。- 将组件中的 handleBlur 方法修改成。3、实现Mac地址输入的修改。
vue结合elementui实现ip输入框
weixin_45766506的博客
09-02 3113
不多说直接上代码： <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"&
【Vue】IP地址输入框
qq_40205510的博客
10-24 658
效果 使用 <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
element-ui实现激活码输入框
weixin_42077503的博客
12-20 824
这个输入框分为8个框，前面的框满了4个字符后自动跳到后面的框，并且支持复制如'aaaa-aaaa-aaaa-aaaa-aaaa-aaaa-aaaa-aaaa'这样的激活码。 代码如下：（这个功能是由ip输入框修改而来，个别注释和变量名还是ip请勿见怪） <!-- * @Author: * @Date: 2021-12-16 16:43:32 * @Description: 激活码输入框 --> <template> <el-popover ...
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
10-15
在本文中，我们将探讨如何在Vue项目中使用vue-amap插件来集成高德地图，并实现画多边形的功能。vue-amap是Vue.js官方维护的一个用于集成高德地图API的插件，它提供了丰富的地图操作和交互功能。 首先，要在Vue项目...
Element UI元件库.zip
06-03
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的界面元素和设计模式，便于构建优雅且响应式的 web 应用。在给定的“Element UI元件库.zip”压缩包中，包含了一个名为“Element UI元件库....
AXURE RP 8 常用的组件库
12-25
### 使用组件库的优势 1. **效率提升**: 使用预设的组件库可以减少手动绘制每个元素的时间，让设计师更专注于交互设计和功能逻辑。 2. **一致性**: 组件库中的组件风格统一，确保原型视觉效果的一致性，提高专业度...
Axure_Components_v2.0.0_插件.rar
01-21
安装Element eleme Axure Components插件后，设计师可以直接在Axure RP中拖拽使用这些组件，无需手动绘制，大大节省了设计时间。此外，该插件还支持自定义样式和交互，满足不同项目的个性化需求。 总之，Element ...
vue项目移动端实现ip输入框问题
12-11
vue框架移动端做ip输入框组件，input在浏览器和微信端兼容问题。 要求：只能输入数字，输入数字以外的字符（包括点、冒号等数字符号）时自动跳到下一段ip输入框. type=number类型，不会禁止点的输入。手动过滤拿不到包括点字符的字符串.而且输入多个点之后，拿到的值为空. 解决办法：type=tel,只能输入数字，且可以获取到点字符的输入 问题：微信下keyup事件无效，回调事件中event.keyCode返回全是229. 解决办法：监听input事件，event事件对象中keycode为空，但是event.data返回输入字符，可以实现过滤. <template> <
基于vue+element的ip格式输入框组件
杨丫丫的专栏
12-19 779
基于vue+element的ip格式输入组件，且支持 （1）输入.时，自动跳入下一输入框； （2）按下backspace删除键，自动回退到上一输入框 （3）任意位置复制、粘贴ip
【前端小点】Vue3中的IP输入框组件
球球博客
01-23 1078
使用vue3写ip输入框组件
用element封装一个ip输入框
m0_59394063的博客
12-12 339
【代码】用element封装一个ip输入框。
Vue3实现IP地址输入框
weixin_46096462的博客
03-23 1329
使用vue3仿照微软的ip输入框
vue+element封装一个填写和校验ip地址的组件
m0_49016709的博客
08-05 828
输入ip地址，输完自己切换到一下输入框，校验IP的准确性。
vue3封装 ip地址输入框
qq_42351255的博客
02-18 671
【代码】vue3封装 ip地址输入框。
vue2.x版本+element-ui2.15+版本实现只能输入数字的ip输入框，功能样式借鉴windows，与父组件双向绑定
weixin_43979556的博客
11-22 3184
基于vue+element-ui中的el-input实现ip输入框，使用@input解决中文输入法会导致v-model与value不同步的问题，同时在每个输入框中输入时都能够实时监听，这里我只判断了输入三个数字自动跳到下个输入框，在中文输入法输完确定后才将输入的非数字置空。
基于vue3.0和element-plus的IP地址输入框
07-20
你可以使用Vue 3.0和Element Plus来创建一个IP地址输入框。首先，确保你已经安装了Vue 3.0和Element Plus。然后，创建一个Vue组件，命名为IPInput.vue，使用Element Plus的Input组件和Form组件来实现IP地址输入框。 ```vue <template> <el-form :model="ipForm" label-width="80px"> <el-form-item label="IP地址"> <el-input v-model="ipForm.ip" placeholder="请输入IP地址"></el-input> </el-form-item> </el-form> </template> <script> export default { data() { return { ipForm: { ip: '' // IP地址 } }; } }; </script> <style> /* 可以根据需求自定义样式 */ </style> ``` 然后，在你的Vue根组件中使用IPInput组件: ```vue <template> <div> <h1>IP地址输入框示例</h1> <IPInput></IPInput> </div> </template> <script> import IPInput from './IPInput.vue'; export default { components: { IPInput } }; </script> <style> /* 可以根据需求自定义样式 */ </style> ``` 这样，你就可以在你的Vue应用中使用基于Vue 3.0和Element Plus的IP地址输入框了。记得在需要的地方引入Element Plus的样式文件。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值