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>
<p>此组件支持以下 props：</p>
<ul>
<li><code>value</code>：IP 地址字符串，必需的。</li>
<li><code>separator</code>：分隔符，用于将 IP 地址字符串分成四个部分。默认为 '.'。</li>
<li><code>segmentLength</code>：每个 IP 地址部分的最大长度。默认为 3。</li>
</ul>
<p>此组件通过 <code>value</code> prop 传递 IP 地址字符串，然后将其分解成四个部分，并将每个部分绑定到一个输入框中。每个输入框的最大长度由 <code>segmentLength</code> prop 指定。当用户在一个输入框中输入了一个完整的部分时，组件将自动将焦点移动到下一个输入框中。当四个部分都被填充时，组件将重新组合它们，并将结果作为新的 IP 地址字符串传递回父组件，使用 <code>input</code> 事件。</p>
<p>此组件的用法如下所示：</p>
<pre><code class="language-html">&lt;template&gt;
  &lt;div&gt;
    &lt;label for='ip-address'&gt;IP Address:&lt;/label&gt;
    &lt;ip-input id='ip-address' v-model='ip'&gt;&lt;/ip-input&gt;
    &lt;p&gt;Your IP address is: {{ ip }}&lt;/p&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import IpInput from './IpInput.vue'

export default {
  name: 'App',
  components: {
    IpInput
  },
  data() {
    return {
      ip: '192.168.0.1'
    }
  }
}
&lt;/script&gt;
</code></pre>
<p>在此示例中，<code>ip</code> 变量将初始化为 <code>192.168.0.1</code>，并传递给 <code>IpInput</code> 组件。当用户在输入框中输入一个新的 IP 地址时，它将通过 <code>v-model</code> 指令更新 <code>ip</code> 变量。</p>