iview 里面的ip 组件封装

先上效果图：

1.这样的空就按是常用的，iview上面暂时无此组件；

2.需要自己去封装一下。

具体代码如下：

父组件代码: (test.vue)

<template>
<div class="body">
    <Form ref="formAddData"  label-position="right" :label-width="120">
        <Row :gutter="24">
            <Col span="11">
                <FormItem label="用户编号：" prop="userId">                            
                    <Input placeholder="自动默认17位用户编号" />
                </FormItem>
            </Col>
            <Col span="11">
                <FormItem label="用户编号：" prop="userId">                            
                    <Input placeholder="自动默认17位用户编号" />
                </FormItem>
                <FormItem label="IP地址：" prop="userId"> 
                    <IP @getIP="ipchange"></IP>
                </FormItem>
            </Col>
            <Col>
                <Button @click="submit" >提交</Button>
            </Col>
            
        </Row>
         
    </Form>

</div>
  
</template>
 
<script>
import IPComponent from './IPComponent.vue';
  export default {
    components: {'IP': IPComponent},
    data() {
      return {
        erro_ip:true,
        ip: '',
        isWX:navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger"
      };
    },
    methods: {
        submit(){
             
        },
        ipchange(ip) {
            console.log('result',ip)
            this.ip = ip;
        }
    },
    mounted(){
      
    },
    watch:{
    }
  };
</script>
 
<style type="text/css">
  /* .ipInput {
    height:32px;
    box-sizing: border-box;
    line-height: inherit;
    border: 1px solid #dcdee2;
    background-color: #fff;
    overflow: hidden;
    border-radius: 5px;
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    outline: transparent;
    font-size:0;
    text-indent: 0;
    background: #fff;
    display: flex;
    flex-direction: row;
  }
    .ipInput.isDisabled {
      background: transparent;
 
    }
     .ipInput.isDisabled li{
        cursor:not-allowed;
        height:32px;
      }
       .ipInput.isDisabled li input{
          cursor:not-allowed;
        }
   .ipInput li {
      display: inline-block;
      width:25%;
      height:32px;
      box-sizing: border-box;
      font-size:0;
      display: flex;
      flex-direction: row;
    }
    .ipInput .ivu-input:focus{
        box-shadow: none;
    }

      .ipInput li input {
        appearance: none; 
        padding:10px 5px;
        width: calc(100% - 3px);
        text-align: center;
        outline: none;
        border: none;
        color: #000;
        box-sizing: border-box;
        font-size: 12px;
        height:32px;
      }
         .ipInput li input.disabled {
          background: transparent;
        }
      .ipInput li span {
        display: inline-block;
        font-size:18px;
        width: 3px;
        height:3px;
        color: #000;
      } */
</style>

子组件代码（IPComponent.vue）：

<template>
     <div class="ipAdress">
        <ul class="ipInput" :class="{isDisabled:isDisabled}" >
        <li :key='index' v-for="(item,index) in ipAdress">
            <input :tabindex="'ipInput'+(index+1)" 
                :class="'ipAdress'+(index+1)" 
                @blur="blurFocus(index)" 
                autocomplete="off" 
                :readonly="isDisabled" 
                :maxlength="3"
                type="tel" 
                pattern="[0-9]{1,3}" 
                @input="checkIpVal(item,index,$event)" 
                :disabled="isDisabled" 
                @keyup="turnIpPOS(item,index,$event)" 
                @keydown="delteIP(item,index,$event)" 
                v-model="item.value" 
                ref="ipInput" />
            <span v-if="index<3">.</span>
        </li>
        </ul>
        <div v-if="erro_ip" style="color: red;">
            ip格式错误!
        </div>
    </div>
</template>
 
<script>
  export default {
    data() {
      return {
        erro_ip:true,
        ipAdress: [{
          value: ''
        }, {
          value: ''
        }, {
          value: ''
        }, {
          value: ''
        }],
        
        isWX:navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger"
      };
    },
    props: {
      ipStr: {
        trype: String,
        default: ''
      },
      ipType: {
        type: String
      },
      isDisabled: {
        type: Boolean,
        default: false
      },
      width: {
        type: String,
        default:'100%'
      }
    },
    watch: {
      ipStr:{
        immediate:true,
        handler:function(vall) {
          let val = vall;
          let nArr = [];
          if(val && val.includes('.') && val.length > 0) {
            let valArr = val.split('.');
            let m = valArr.length;
            for(let i = 0; i < 4; i++) {
              if(valArr[i] == 'null' || valArr[i] == 'undefined'){
                valArr[i] = '';
              }
              if(i < m) {
                nArr.push({
                  value: valArr[i]
                });
              } else {
                nArr.push({
                  value: ''
                });
              }
            }
          } else {
            nArr = [{
              value: ''
            }, {
              value: ''
            }, {
              value: ''
            }, {
              value: ''
            }];
          }
          this.ipAdress = nArr;
        }
      } 
    },
    methods: {
      //methods
      blurFocus(index) {
        if(index == 3) {
          this.$emit('blur');
        }
      },
      checkIpVal(item,index,event) {
        //   console.log("event",event, this.ipAdress);
          if(this.ipAdress[0].value && this.ipAdress[1].value && this.ipAdress[2].value && this.ipAdress[3].value){
               this.erro_ip = false; 
          } else {
               this.erro_ip = true; 
          }

        let self = this;
        //wx
        if(this.isWX){
          let e = event || window.event;
          let keyCode = e.data;
           
         //.向右跳转
          if(keyCode === ".") {
            e.preventDefault();
            e.returnValue = false;
            item.value = item.value.replace(/[^\d]/g, "").replace(/[\.]/g, "");
            if(index < 3 ) {
              self.$refs.ipInput[index + 1].focus();
            }
            return false;
          }
        }
         
         
         
         
        let isNo = /^[0-9]{1,3}$/g;
        if(/[^\d]/g.test(item.value)){
          let cache = JSON.parse(JSON.stringify(self.ipAdress));
          cache[index].value = item.value.replace(/[^\d]/g, "").replace(/[\.]/g, "");
          self.ipAdress = cache;
          return false;
        }
         
         
         
        if(item.value.replace(/[^\d]/g, "").length >= 3) {        
          let val = parseInt(item.value.replace(/[^\d]/g, ""), 10);
          if(isNaN(val)) {
            val = ''
          } else if(val > 255) {
            val = 255;
          } else {
            val = val < 0 ? 0 : val;
          }
          item.value = String(val);
          this.$set(this.ipAdress,index,item);
          if(index < 3 ) {            
            self.$refs.ipInput[index + 1].focus();                
          }
        }      
        let ns = '';
        this.ipAdress.forEach(item => ns += '.' + item.value);

        // 给父组件传值 ip的值
        if (!this.erro_ip) {
            let ip =''
            this.ipAdress.map((v=>{
                ip =ip+ '.' + v.value 
            }))
            // console.log('ip', ip.substring(1))
            this.$emit('getIP', ip.substring(1));
        }
 
      },
      turnIpPOS(item, index, event) {
        let self = this;
        let e = event || window.event;
         
        if(e.keyCode == 37) {
          if(index != 0) {
            self.$refs.ipInput[index - 1].focus();
          }
        }
        //右箭头、回车键、空格键、冒号均向右跳转，右一不做任何措施
        if(e.keyCode == 39 || e.keyCode == 13 || e.keyCode == 32 || e.keyCode == 110 || e.keyCode == 46 || e.keyCode == 190 ) {
          e.preventDefault();
          e.returnValue = false;
          if(index < 3 ) {
            self.$refs.ipInput[index + 1].focus();
          }
          return false;
        }
         
      },
      delteIP(item, index, event) {  
        //   console.log('deleteIP',item, index, event)
        let self = this;
        let e = event || window.event;
         
        let val = parseInt(item.value.replace(/[^\d]/g, ""), 10);
        val = isNaN(val) ? '' : val;
        if(e.keyCode == 8 && index > 0 && val.length==0) {
            self.$refs.ipInput[index - 1].focus();
        }
      }
    },
    mounted(){
      console.log(this.$props)
      console.log(this.$attrs.index)
    },
    watch:{
    }
  };
</script>
 
<style type="text/css">
  .ipInput {
    /* width: 260px; */
    height:32px;
    box-sizing: border-box;
    line-height: inherit;
    border: 1px solid #dcdee2;
    background-color: #fff;
    overflow: hidden;
    border-radius: 5px;
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    outline: transparent;
    font-size:0;
    text-indent: 0;
    background: #fff;
    display: flex;
    flex-direction: row;
  }
    .ipInput.isDisabled {
      background: transparent;
 
    }
     .ipInput.isDisabled li{
        cursor:not-allowed;
        height:32px;
      }
       .ipInput.isDisabled li input{
          cursor:not-allowed;
        }
   .ipInput li {
      display: inline-block;
      width:25%;
      height:32px;
      box-sizing: border-box;
      font-size:0;
      display: flex;
      flex-direction: row;
    }
    .ipInput .ivu-input:focus{
        box-shadow: none;
    }

      .ipInput li input {
        appearance: none; 
        padding:10px 5px;
        width: calc(100% - 3px);
        text-align: center;
        outline: none;
        border: none;
        color: #000;
        box-sizing: border-box;
        font-size: 12px;
        height:32px;
      }
         .ipInput li input.disabled {
          background: transparent;
        }
      .ipInput li span {
        display: inline-block;
        font-size:18px;
        width: 3px;
        height:3px;
        line-height: 23px !important;
        color: #000;
      }
</style>

最终的效果图如下：

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140