vue3使用vue-diff插件实现文本对比

前面介绍过vue3通过monaco-editor实现文本对比功能 但因为业务需要自定义左右两侧文本的底色及高亮颜色，考虑换一个插件：vue-diff

1、下载插件：

npm i vue-diff@1.2.4

 2、main.js中引入并注册插件：

// Diff对比
import VueDiff from "vue-diff";
import "vue-diff/dist/index.css";

const app = createApp(App)
app.use(VueDiff)

3、vue文件中使用diff插件：

<template>
        <Diff
        mode="split" // split, unified两种格式可选
        theme="light"
        language="text" //语言
        prev="上一个文本"
        current="当前文本"
        style="height: calc(100% - 50px); width: 100%; overflow: scroll"
      />
</template>

current和prev可设置为变量去动态改变数据；

language可选值：

• css
• xml: xml, html, xhtml, rss, atom, xjb, xsd, xsl, plist, svg
• markdown: markdown, md, mkdown, mkd
• javascript: javascript, js, jsx
• json
• plaintext: plaintext, txt, text
• typescript: typescript, ts