vue实现文字对比

Vue 实现文字对比功能

实现文字对比功能通常涉及高亮显示两段文本之间的差异。以下是几种常见方法：

使用现成的库

安装 diff 库进行文本差异计算：

npm install diff

创建对比组件：

<template>
  <div>
    <div v-html="diffResult"></div>
  </div>
</template>

<script>
import { diffWords } from 'diff';

export default {
  props: ['oldText', 'newText'],
  computed: {
    diffResult() {
      const differences = diffWords(this.oldText, this.newText);
      return differences.map(part => {
        const color = part.added ? 'green' : part.removed ? 'red' : 'grey';
        return `<span style="background-color:${color}">${part.value}</span>`;
      }).join('');
    }
  }
}
</script>

自定义实现简单对比

对于简单需求，可以手动实现对比：

<template>
  <div class="text-compare">
    <div class="original">{{ originalText }}</div>
    <div class="modified">{{ modifiedText }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalText: '这是原始文本',
      modifiedText: '这是修改后的文本'
    }
  },
  mounted() {
    this.highlightDifferences();
  },
  methods: {
    highlightDifferences() {
      // 实现差异高亮逻辑
    }
  }
}
</script>

<style>
.text-compare {
  display: flex;
}
.text-compare div {
  width: 50%;
  padding: 10px;
}
.diff {
  background-color: #ffcccc;
}
</style>

使用 Monaco Editor 实现专业对比

对于代码对比等专业需求，可以使用 Monaco Editor：

<template>
  <div id="container" style="width:800px;height:600px"></div>
</template>

<script>
import * as monaco from 'monaco-editor';

export default {
  mounted() {
    const originalModel = monaco.editor.createModel('原始文本内容');
    const modifiedModel = monaco.editor.createModel('修改后文本内容');

    const diffEditor = monaco.editor.createDiffEditor(
      document.getElementById('container')
    );

    diffEditor.setModel({
      original: originalModel,
      modified: modifiedModel
    });
  }
}
</script>

响应式对比实现

结合 Vue 的响应式特性实现动态对比：

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

<script>
export default {
  data() {
    return {
      text1: '',
      text2: ''
    }
  },
  computed: {
    comparisonResult() {
      let result = '';
      const maxLength = Math.max(this.text1.length, this.text2.length);

      for (let i = 0; i < maxLength; i++) {
        const char1 = this.text1[i] || '';
        const char2 = this.text2[i] || '';

        if (char1 === char2) {
          result += char1;
        } else {
          result += `<span class="diff">${char2}</span>`;
        }
      }

      return result;
    }
  }
}
</script>

<style>
.diff {
  background-color: yellow;
  font-weight: bold;
}
</style>

这些方法可以根据具体需求进行调整和组合，实现不同复杂度的文字对比功能。对于生产环境，推荐使用成熟的差异算法库以获得更好的性能和准确性。