效果图

安装

 vue3 json代码及字符串 v-code-diff对比插件

插件地址：v-code-diff

pnpm install --save v-code-diff

使用方式

man.ts中全局引入v-code-diff

//main.ts

import { createApp } from "vue";

import App from "./App.vue";

//代码对比插件

import CodeDiff from "v-code-diff";

const app = createApp(App);

app.use(CodeDiff).mount("#app");

封装代码

HTML

<template>

<el-dialog :model-value="compareDialog" width="60%" top="80px" :close-on-click-modal="false" @closed="dialogClosed">code>

<div class="codeDiffHeader">code>

<!-- 左边标题 -->

<span>{ { leftTitle }}</span>

<span style="display: flex">code>

<!-- 右边标题 -->

{ { rightTitle }}

<!-- 切换只查看不同的内容 -->

<el-switch

v-model="switchValue"code>

inactive-text="只看diff"code>

size="small"code>

:disabled="pbContentRight === pbContentLeft ? true : false"code>

style="margin-left: auto"code>

@change="diffbutton"code>

/></span>

</div>

<div>

<!--old-string pbContentLeft 左，旧值 new-string pbContentRight 右，新值 -->

<!-- context 不同地方上下间隔多少行不隐藏，

通过切换0行或者99999行实现只看不同的内容或者查看全部内容 -->

<!-- outputFormat 展示方式

line-by-line(一页显示),side-by-side（两页显示）-->

<code-diff

v-loading="diffLoading"code>

class="center"code>

:old-string="pbContentLeft"code>

:new-string="pbContentRight"code>

output-format="side-by-side"code>

:context="diff ? 0 : 99999" />code>

</div>

<template #footer>

<div class="dialog-footer">code>

<el-button v-if="needToPublish" type="primary" @click="confirmPublish">发布</el-button>code>

<el-button v-if="needToConfirm" type="primary" @click="handleCompare">确认</el-button>code>

<el-button @click="dialogClosed">取 消</el-button>code>

</div>

</template>

</el-dialog>

</template>

TS

<script setup lang="ts">code>

import { ref, toRefs } from "vue";

const props = defineProps({

compareDialog: {

type: Boolean,

default: false,

},

// 是否需要发布按钮

needToPublish: {

type: Boolean,

default: false,

},

// 是否需要确认按钮

needToConfirm: {

type: Boolean,

default: false,

},

pbContentRight: {

type: String,

default: "",

},

pbContentLeft: {

type: String,

default: "",

},

leftTitle: {

type: String,

default: "现网文件",

},

rightTitle: {

type: String,

default: "运营系统",

},

});

const switchValue = ref(false);

const diff = ref(false);

const diffLoading = ref(false);

const diffbutton = () => {

diffLoading.value = true;

diff.value = switchValue.value;

diffLoading.value = false;

};

const emit = defineEmits(["update:compareDialog", "handleCompare", "confirmPublish", "compareDialogClosed"]);

// 关闭弹窗

const dialogClosed = () => {

switchValue.value = false;

diff.value = false;

emit("update:compareDialog", false);

emit("compareDialogClosed");

};

// 确认操作

const handleCompare = () => {

emit("handleCompare");

};

// 发布操作

const confirmPublish = () => {

emit("confirmPublish");

};

</script>

CSS

<style lang="scss" scoped>code>

.codeDiffHeader {

display: flex;

& > span {

flex: 1;

}

}

.center {

height: 600px;

overflow-x: hidden;

overflow-x: auto;

overflow-y: auto;

}

</style>

在父组件中使用