push

lib/component/form/input/input-ip.vue

@@ -0,0 +1,215 @@
+<!-- @format -->
+
+<template>
+  <div class="ipInputContain">
+    <div
+      class="ipInputBox"
+      v-for="(item, index) in defaultValue"
+      :key="index"
+      @mouseover="
+        () => {
+          flag = index;
+        }
+      "
+      @mouseleave="
+        () => {
+          flag = null;
+        }
+      ">
+      <!-- 包裹的error外边框 -->
+      <!-- 需求修改内部边框警示去除 -->
+      <!-- <div :class="activeIndex[index] ? 'active' : ''"> -->
+      <ns-input
+        type="number"
+        class="ipInput"
+        :value="defaultValue[index]"
+        @change="onChange(index, $event)"
+        @keydown="onKeyDown(index, $event)"
+        @keyup="onKeyUp(index, $event)"
+        @blur="onBlur" />
+      <!-- </div> -->
+      <div class="tips" v-show="flag == index ? true : false">0~255</div>
+    </div>
+  </div>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  // 导入的报错icon
+  // import { CloseCircleOutlined } from '@ant-design/icons-vue';
+  export default defineComponent({
+    name: 'NsInputIp',
+    // 传入的报错icon
+    // components: { CloseCircleOutlined },
+    props: {
+      modelValue: {
+        type: String,
+        default: '',
+      },
+      // defaultValue: {
+      //   type: Array,
+      //   default: () => {
+      //     return ['', '', '', ''];
+      //   },
+      // },
+    },
+    emits: ['change', 'updata:modelValue'],
+    setup(props, { attrs }) {
+      let defaultValue = ['', '', '', ''];
+      let ipValue = props.modelValue;
+      if (ipValue) {
+        let newValue = ipValue.split('.');
+        defaultValue = newValue;
+      }
+      return { defaultValue };
+    },
+    data() {
+      return {
+        // ip: [1, 2, 3, 4],
+        // 控制下弹框显示隐藏
+        flag: null,
+        // value: [null, null, null, null],
+        // 边框警示
+        activeIndex: [false, false, false, false],
+        // ipAddress: new Array(4),
+        ipAddress: ['', '', '', ''],
+        errShow: false,
+        ipResult: '',
+      };
+    },
+    watch: {
+      defaultValue() {},
+    },
+    mounted() {
+      // console.log(newValue);
+      // eslint-disable-next-line vue/no-mutating-props
+      // this.defaultValue = newValue;
+    },
+    methods: {
+      onKeyDown() {},
+      onBlur(e) {
+        // let value = e.target.value;
+        const res = this.ipAddress.some((item) => item === '');
+        // console.log(typeof(this.ipAddress[1]));
+        if (res) {
+          this.errShow = true;
+        }
+      },
+      onKeyUp(index, e) {
+        let flag = this.ipAddress.some((item) => {
+          return item === '';
+        });
+        if (flag) {
+          this.errShow = true;
+        } else {
+          this.errShow = false;
+        }
+      },
+      onChange(index, e) {
+        // console.log(this.defaultValue);
+        let value = e.target.value;
+        let ip = this.defaultValue;
+        value = value.toString().replace(/[^0-9]/g, '');
+        value = parseInt(value, 10);
+        if (isNaN(value)) {
+          value = '';
+        } else {
+          value = value < 0 ? 0 : value;
+          value = value > 255 ? 255 : value;
+        }
+        ip[index] = value;
+        if (ip[index] === '') {
+          ip[index] = '';
+          this.activeIndex[index] = true;
+        } else {
+          this.activeIndex[index] = false;
+        }
+        let ipResult = this.defaultValue.join('.');
+        this.ipResult = ipResult;
+        this.$emit('change', this.ipResult);
+        this.$emit('updata:modelValue', ipResult);
+      },
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .active {
+    border: 1px solid red;
+  }
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+  .ipInputContain {
+    display: flex;
+    max-width: 298px;
+    width: 236px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    .ipInputBox {
+      position: relative;
+      flex: 1;
+      margin-right: 10px;
+      font-family: heiti, Helvetica, Roboto, Arial, sans-serif;
+      font-size: 14px;
+      // color: #172e3d;
+      // overflow: hidden;
+      // -webkit-font-smoothing: antialiased;
+      // -moz-osx-font-smoothing: grayscale;
+      .ipInput {
+        width: 100%;
+        height: 100%;
+        outline: none;
+        padding: 0 5px;
+        min-width: 40px;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        line-height: 30px;
+        text-align: center;
+        height: 30px;
+        // background: inherit;
+        border-radius: 0;
+        color: #172e3d;
+      }
+      .tips {
+        position: absolute;
+        top: 37px;
+        border: 1px solid #ddd;
+        background: #d8d8d8;
+        min-width: 40px;
+        max-width: 300px;
+        height: 25px;
+        box-sizing: border-box;
+        padding: 3px;
+        text-align: center;
+        z-index: 999;
+        &::before {
+          content: '';
+          display: block;
+          width: 10px;
+          border: 5px solid transparent;
+          border-bottom: 5px solid #d8d8d8;
+          position: absolute;
+          top: -10px;
+          left: 50%;
+          transform: translate(-50%, 0);
+        }
+      }
+    }
+  }
+
+  .ipInputBox::after {
+    content: '.';
+    position: absolute;
+    top: 12px;
+    right: -7px;
+  }
+  .ipInputBox:nth-child(4):after {
+    content: '';
+  }
+  .errorText {
+    margin-top: 10px;
+    color: red;
+    letter-spacing: 1px;
+  }
+</style>