mocano editor中使用代碼比對(duì)功能

環(huán)境：vue2.x + typescript

使用前提請(qǐng)先看：vue2.x中monaco-editor的基礎(chǔ)使用

效果圖：

創(chuàng)建代碼公共組件

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`按情況創(chuàng)建模型，比如初始兩個(gè)都渲染，`original` 改變只創(chuàng)建`original`的model，`modified`改變只創(chuàng)建`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" />

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。