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`的modelinstance.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" />

總結

以上是生活随笔為你收集整理的mocano editor中使用代码比对功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。