Vue3+ts 前端封装代码/文本对比diff弹窗组件

效果图

安装

 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">
    <div class="codeDiffHeader">
      <!-- 左边标题 -->
      <span>{{ leftTitle }}</span>
      <span style="display: flex">
        <!-- 右边标题 -->
        {{ rightTitle }}
        <!-- 切换只查看不同的内容 -->
        <el-switch
          v-model="switchValue"
          inactive-text="只看diff"
          size="small"
          :disabled="pbContentRight === pbContentLeft ? true : false"
          style="margin-left: auto"
          @change="diffbutton"
      /></span>
    </div>
    <div>
      <!--old-string pbContentLeft 左，旧值   new-string pbContentRight 右，新值 -->
      <!-- context 不同地方上下间隔多少行不隐藏，
        通过切换0行或者99999行实现只看不同的内容或者查看全部内容 -->
      <!-- outputFormat 展示方式  
        line-by-line(一页显示),side-by-side（两页显示）-->
      <code-diff
        v-loading="diffLoading"
        class="center"
        :old-string="pbContentLeft"
        :new-string="pbContentRight"
        output-format="side-by-side"
        :context="diff ? 0 : 99999" />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button v-if="needToPublish" type="primary" @click="confirmPublish">发布</el-button>
        <el-button v-if="needToConfirm" type="primary" @click="handleCompare">确认</el-button>
        <el-button @click="dialogClosed">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

TS

<script setup lang="ts">
  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>
  .codeDiffHeader {
    display: flex;

    & > span {
      flex: 1;
    }
  }

  .center {
    height: 600px;
    overflow-x: hidden;
    overflow-x: auto;
    overflow-y: auto;
  }
</style>

在父组件中使用

HTML

<!-- 数据对比弹窗 -->
      <codeDiffDialog
        v-model:compare-dialog="compareDialog.visible"
        :pb-content-right="pb_content_right"
        :pb-content-left="pb_content_left"
        :need-to-confirm="true"
        @handle-compare="handleCompare"
        @compare-dialog-closed="closeCompareDialog"></codeDiffDialog>

TS

//控制弹窗显示与隐藏
const compareDialog = reactive<DialogOption>({
    visible: false,
  });

//注意：只能赋值字符串，如果传入的是json需要转换
let pb_content_right = ref<string>("");
//pb_content_right.value=JSON.stringify(res.pb_content_right,null,2)
let pb_content_left = ref<string>("");
//pb_content_left.value=JSON.stringify(res.pb_content_left,null,2)

const handleCompare = () => {
//点击确认按钮后执行
}

const closeCompareDialog = () => {
 //点击关闭按钮执行
};