实现不同文字对比的vue组件

点击查看代码

<template>
  <div>
    <div v-for="(part, index) in diffResult" :key="index"
         :class="{ 'text-added': part.added, 'text-removed': part.removed, 'text-unchanged': !part.added && !part.removed }"
         class="diff-part">
      {{ part.value }}
    </div>
  </div>
</template>

<script>
import { diffWords } from 'diff'; // 引入jsdiff[citation:2][citation:10]

export default {
	props: {
		currentHtml: {
			required: true,
      default: ''
		},
		previousHtml: {
      required: true,
      default: ''
		}
	},
  data() {
    return {
      diffResult: []
    };
  },
  mounted() {
    this.compareText();
  },
  methods: {
    // 1. 提取纯文本
    extractText(htmlString) {
      const div = document.createElement('div');
      div.innerHTML = htmlString;
      return div.textContent || div.innerText || '';
    },
    // 2. 进行对比
    compareText() {
      const currentText = this.extractText(this.currentHtml);
      const previousText = this.extractText(this.previousHtml);
      // 使用 diffWords 进行单词级比对[citation:2][citation:10]
      this.diffResult = diffWords(previousText, currentText);
      // diffResult 是一个数组，包含 added/removed 标记的片段[citation:3][citation:6]
    }
  }
};
</script>

<style scoped>
.text-added {
  background-color: #e6ffed; /* 新增：浅绿色 */
}
.text-removed {
  background-color: #ffe6e6; /* 删除：浅红色 */
  text-decoration: line-through;
  color: #8e3434;
}
.text-unchanged {
  /* 未变化部分 */
}
.diff-part {
  display: inline; /* 确保差异片段连续显示 */
}
</style>