vue封装ip输入框

以下是一个简单的Vue组件，它实现了一个IP地址输入框的封装：

<template>
  <div class="ip-input">
    <input v-for="(segment, index) in segments" :key="index"
           v-model="segments[index]" class="segment" type="text"
           :maxlength="segmentLength" @input="onInput($event, index)" />
    <span class="separator">{{ separator }}</span>
  </div>
</template>

<script>
export default {
  name: 'IpInput',
  props: {
    value: {
      type: String,
      required: true
    },
    separator: {
      type: String,
      default: '.'
    },
    segmentLength: {
      type: Number,
      default: 3
    }
  },
  data() {
    return {
      segments: []
    }
  },
  mounted() {
    this.parseValue()
  },
  watch: {
    value() {
      this.parseValue()
    }
  },
  methods: {
    parseValue() {
      this.segments = this.value.split(this.separator)
    },
    onInput(event, index) {
      const segment = event.target.value
      if (segment.length === this.segmentLength && index < 3) {
        this.$refs[`segment-${index+1}`][0].focus()
      }
      this.segments[index] = segment
      const ip = this.segments.join(this.separator)
      this.$emit('input', ip)
    }
  }
}
</script>

<style scoped>
.ip-input {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ip-input .segment {
  width: 24px;
  text-align: center;
}

.ip-input .separator {
  margin: 0 2px;
}
</style>

此组件支持以下props：

• value：IP地址字符串，必需的。
• separator：分隔符，用于将IP地址字符串分成四个部分。默认为.。
• segmentLength：每个IP地址部分的最大长度。默认为3。

此组件通过value prop传递IP地址字符串，然后将其分解成四个部分，并将每个部分绑定到一个输入框中。每个输入框的最大长度由segmentLength prop指定。当用户在一个输入框中输入了一个完整的部分时，组件将自动将焦点移动到下一个输入框中。当四个部分都被填充时，组件将重新组合它们，并将结果作为新的IP地址字符串传递回父组件，使用input事件。

此组件的用法如下所示：

<template>
  <div>
    <label for="ip-address">IP Address:</label>
    <ip-input id="ip-address" v-model="ip"></ip-input>
    <p>Your IP address is: {{ ip }}</p>
  </div>
</template>

<script>
import IpInput from './IpInput.vue'

export default {
  name: 'App',
  components: {
    IpInput
  },
  data() {
    return {
      ip: '192.168.0.1'
    }
  }
}
</script>

在此示例中，ip变量将初始化为192.168.0.1，并传递给IpInput组件。当用户在输入框中输入一个新的IP地址时，它将通过v-model指令更新ip变量