当前位置：首页 > VUE

vue实现分段输入

2026-02-18 09:16:23VUE

实现分段输入的基本思路

在Vue中实现分段输入功能，可以通过拆分输入框为多个部分，或者使用单个输入框结合特定分隔符来区分段落。以下是两种常见实现方式：

多输入框分段实现

创建多个独立的输入框组件，通过v-model绑定不同的数据属性：

<template>
  <div>
    <input v-model="segment1" placeholder="第一段">
    <input v-model="segment2" placeholder="第二段">
    <input v-model="segment3" placeholder="第三段">
    <button @click="combineSegments">合并</button>
    <p>合并结果: {{ combinedText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      segment1: '',
      segment2: '',
      segment3: '',
      combinedText: ''
    }
  },
  methods: {
    combineSegments() {
      this.combinedText = `${this.segment1}\n${this.segment2}\n${this.segment3}`
    }
  }
}
</script>

单输入框带分隔符实现

使用单个textarea，通过特定字符（如分号）作为分隔符：

<template>
  <div>
    <textarea v-model="inputText" placeholder="用分号;分隔段落"></textarea>
    <button @click="splitText">分段显示</button>
    <div v-for="(segment, index) in segments" :key="index">
      <p>段落 {{ index + 1 }}: {{ segment }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
      segments: []
    }
  },
  methods: {
    splitText() {
      this.segments = this.inputText.split(';').filter(s => s.trim())
    }
  }
}
</script>

动态添加输入段落的实现

允许用户动态添加更多输入框：

<template>
  <div>
    <div v-for="(segment, index) in segments" :key="index">
      <input v-model="segments[index]" :placeholder="`段落 ${index + 1}`">
      <button @click="removeSegment(index)" v-if="index > 0">删除</button>
    </div>
    <button @click="addSegment">添加段落</button>
    <p>合并结果: {{ combinedText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      segments: ['']
    }
  },
  computed: {
    combinedText() {
      return this.segments.join('\n')
    }
  },
  methods: {
    addSegment() {
      this.segments.push('')
    },
    removeSegment(index) {
      this.segments.splice(index, 1)
    }
  }
}
</script>

带格式化的分段输入

添加富文本编辑器支持，如使用v-html显示格式化内容：

<template>
  <div>
    <textarea v-model="rawInput" placeholder="输入内容，用空行分隔段落"></textarea>
    <div v-html="formattedOutput"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawInput: ''
    }
  },
  computed: {
    formattedOutput() {
      return this.rawInput
        .split('\n\n')
        .map(para => `<p>${para.replace(/\n/g, '<br>')}</p>`)
        .join('')
    }
  }
}
</script>

使用第三方库实现

对于更复杂的分段输入需求，可以考虑使用专门的库：

npm install vue-input-tag

<template>
  <div>
    <vue-input-tag v-model="tags"></vue-input-tag>
    <p>输入段: {{ tags.join(' | ') }}</p>
  </div>
</template>

<script>
import VueInputTag from 'vue-input-tag'

export default {
  components: {
    VueInputTag
  },
  data() {
    return {
      tags: []
    }
  }
}
</script>

这些方法可以根据具体需求进行调整和组合，实现各种形式的分段输入功能。

vue实现分段输入