基于ElementUI input 实现IPinput

实现效果

代码：

<template>
  <div
    :class="['ip-input-container', 'input240', disabled && 'is-disabled']"
    @paste="handlePaste"
  >
    <span v-for="(item, index) in list" :key="index" class="item">
      <el-input
        :ref="`input${index}`"
        v-model="item.val"
        :disabled="disabled"
        :placeholder="item.placeholder"
        :tabindex="`${index}`"
        :maxlength="3"
        @keyup.native="handleKeyup($event, index)"
      />
    </span>
  </div>
</template>

<script>
export default {
  name: 'IpInput',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list: this.createInputList()
    }
  },
  watch: {
    value() {
      this.dealVal()
    }
  },
  mounted() {
    this.dealVal()
  },
  methods: {
    dealVal() {
      const val = this.value.split('.')
        .filter(item => item !== '')
      this.list.map((item, index) => {
        item.val = val[index] || ''
      })
    },
    handlePaste(ev) {
      const clipTexts = ev.clipboardData.getData('Text')
      const data = clipTexts.split('.')
      const tabIndex = ev.target.tabIndex

      setTimeout(() => {
        const len = this.list.length
        for (let i = 0; i < len; i++) {
          if (data.length === len) {
            this.list[i].val = data[i] || ''
          } else {
            if (i < tabIndex) {
              continue
            }
            this.list[i].val = data[i - tabIndex] || ''
          }
        }
      }, 0)
    },
    handleKeyup(ev, index) {
      const keyCode = ev.keyCode
      // 只能填数字
      ev.target.value = ev.target.value.replace(/[^\d]/g, '')

      // 满3个或者按空格/回车/英文点 跳到下一格
      index < this.list.length - 1 && (this.list[index].val.length === 3 || [32, 13, 190].includes(keyCode)) && this.$refs[`input${index + 1}`][0].focus()

      // 按回退键
      keyCode === 8 && this.list[index].val.length === 0 && index >= 1 && this.$refs[`input${index - 1}`][0].focus()

      const val = this.list
        .map(item => item.val.replace(/[^\d]/g, ''))
        .filter(item => item !== '')
        .join('.')
      this.$emit('input', val)
    },
    createInputList() {
      const arr = []
      for (let i = 0; i < 4; i++) {
        arr.push({ val: '', placeholder: '0' })
      }
      return arr
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "@/styles/theme/_variables";

  .ip-input-container {
    display: flex;
    line-height: 30px;
    border: 1px solid $--base-border-color;
    border-radius: 2px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

    &:hover,
    &:focus,
    &:focus-within {
      border: 1px solid $--primary-hover-color;
    }

    &.is-disabled {
      border-color: $--disabled-border-color;
    }

    span.item {
      position: relative;

      ::v-deep {
        .el-input__inner {
          height: 30px;
          padding: 0 12px;
          line-height: 30px;
          border: 0;
        }
      }

      &::after {
        position: absolute;
        left: 0;
        width: 2px;
        height: 2px;
        color: $--base-placeholder-color;
        content: '·';
      }

      &:first-of-type {
        &::after {
          content: '';
        }
      }
    }
  }

  .is-error {
    .ip-input-container {
      border-color: $--danger-color;
    }
  }
</style>