vue实现文字对比

Vue 实现文字对比的方法

在 Vue 中实现文字对比功能可以通过多种方式，以下是几种常见的方法：

使用字符串比较

直接比较两个字符串是否相等，适用于简单的文字对比场景。

<template>
  <div>
    <p>字符串1: {{ text1 }}</p>
    <p>字符串2: {{ text2 }}</p>
    <p>对比结果: {{ comparisonResult }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text1: 'Hello World',
      text2: 'Hello Vue'
    }
  },
  computed: {
    comparisonResult() {
      return this.text1 === this.text2 ? '相同' : '不同'
    }
  }
}
</script>

使用差异高亮显示

对于需要显示具体差异的文字对比，可以使用专门的库如diff或vue-diff。

安装依赖：

npm install diff

实现代码：

<template>
  <div>
    <textarea v-model="text1"></textarea>
    <textarea v-model="text2"></textarea>
    <div v-html="diffResult"></div>
  </div>
</template>

<script>
import { diffWords } from 'diff'

export default {
  data() {
    return {
      text1: '旧文本内容',
      text2: '新文本内容'
    }
  },
  computed: {
    diffResult() {
      const differences = diffWords(this.text1, this.text2)
      let result = ''

      differences.forEach(part => {
        const color = part.added ? 'green' : part.removed ? 'red' : 'grey'
        result += `<span style="color:${color}">${part.value}</span>`
      })

      return result
    }
  }
}
</script>

使用第三方组件

对于更复杂的对比需求，可以使用现成的Vue组件如vue-code-diff。

安装：

npm install vue-code-diff

使用示例：

<template>
  <div>
    <code-diff
      :old-string="oldText"
      :new-string="newText"
      output-format="side-by-side"
    />
  </div>
</template>

<script>
import { CodeDiff } from 'vue-code-diff'

export default {
  components: {
    CodeDiff
  },
  data() {
    return {
      oldText: '旧版本内容',
      newText: '新版本内容'
    }
  }
}
</script>

实现逐行对比

对于多行文本的对比，可以先将文本分割成数组再逐行比较。

<template>
  <div>
    <div v-for="(line, index) in comparedLines" :key="index">
      <span :style="{ color: line.status === 'added' ? 'green' : line.status === 'removed' ? 'red' : 'black' }">
        {{ line.text }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text1: '第一行\n第二行\n第三行',
      text2: '第一行\n修改行\n第三行'
    }
  },
  computed: {
    comparedLines() {
      const lines1 = this.text1.split('\n')
      const lines2 = this.text2.split('\n')
      const maxLength = Math.max(lines1.length, lines2.length)
      const result = []

      for (let i = 0; i < maxLength; i++) {
        if (lines1[i] !== lines2[i]) {
          if (lines1[i]) result.push({ text: lines1[i], status: 'removed' })
          if (lines2[i]) result.push({ text: lines2[i], status: 'added' })
        } else {
          result.push({ text: lines1[i], status: 'unchanged' })
        }
      }

      return result
    }
  }
}
</script>

以上方法可以根据具体需求选择使用，从简单的字符串比较到复杂的差异高亮显示都能满足不同场景下的文字对比需求。