mocano editor中使用代碼比對功能

環境：vue2.x + typescript

使用前提請先看：vue2.x中monaco-editor的基礎使用

效果圖：

創建代碼公共組件

codeDiff.vue

<template>
  <div class="editor" :id="id"></div>
</template>

<script lang="ts">
import CodeDiff from "./codeDiff";
export default CodeDiff;
</script>

<style lang="less" scoped>
.editor {
  width: 100%;
  height: 635px;
  text-align: left;
}
</style>

codeDiff.ts

import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import * as Monaco from "monaco-editor";

interface ICode {
  value: string;
  language: string;
}

@Component
export default class CodeDiff extends Vue {
  diffInstance: any;
  id = "";

  @Prop({ default: { value: "", language: "" } })
  oldCode!: ICode;

  @Prop({ default: { value: "", language: "" } })
  code!: ICode;

  created(): void {
    this.id = `editor${Math.random()}`;
  }

  @Watch("oldCode", { deep: true })
  oldWatch(): void {
    this.change();
  }
  @Watch("code", { deep: true })
  nowWatch(): void {
    this.change();
  }

  mounted(): void {
    this.init();
  }
  setModel(instance: any): void {
    // 此處可以把`original`和`modified`按情況創建模型，比如初始兩個都渲染，`original`
改變只創建`original`的model，`modified`改變只創建`modified`的model
	instance.setModel({
      original: Monaco.editor.createModel(
        this.oldCode.value,
        this.oldCode.language,
      ),
      modified: Monaco.editor.createModel(
        this.code.value,
        this.code.language,
      ),
    })
  }
  init(): void {
    const code: HTMLElement = document.getElementById(this.id) as HTMLElement;

    this.diffInstance = Monaco.editor.createDiffEditor(code, {
      wordWrap: "on",
      scrollBeyondLastLine: false,
      automaticLayout: true,
      readOnly: true,
    });
    this.setModel(this.diffInstance);
  }
  change(): void {
    if (this.diffInstance === null) {
      this.init();
      return;
    }
    this.setModel(this.diffInstance);
  }
}

使用組件

<code-diff :old-code="oldCodeInfo" :code="codeInfo" />