<MonacoDiffEditor>

<MonacoDiffEditor> は、2つのファイルの差分を表示するために利用します。

<MonacoDiffEditor> の使用方法は、 <MonacoEditor> とほとんど同じです。

プレビュー

コード

値の設定・取得

<template>
  <MonacoDiffEditor
 :
original
="originalValue
" v-model
="modifiedValue
" />
</template>

<script lang="ts" setup>
const originalValue
 = ref
('Original Value')
const modifiedValue
 = ref
('Modified Value')
</script>

v-model は変更後の値に対応しています。変更前の値は monaco-editor では読み取り専用になっています。

代替表示

<template>
  <MonacoDiffEditor>
    Loading...
  </MonacoDiffEditor>
</template>

<MonacoDiffEditor> の子要素がエディタの読み込み中に表示されます。

プロパティ

langstring

plaintext

配色に用いるプログラミング言語です。options.language の値を上書きします。
使用可能な言語の一覧はこちらにあります。

optionsIStandaloneDiffEditorConstructionOptions

monaco.editor.createDiffEditorの第2引数として渡される設定です。エディタが表示された後に変更することもできます。
使用可能な設定の一覧はこちらにあります。

originalstring

エディタに表示される変更前の値です。

modelUrimonaco.Uri

変更後の値に対応するモデルを識別するURIです。

originalModelUrimonaco.Uri

変更前の値に対応するモデルを識別するURIです。

イベント

interface Emits
 {
  (event
: 'update:modelValue', value
: string): void
  (event
: 'load', editor
: monaco
.editor
.IStandaloneDiffEditor
): void
}

load

エディタの読み込みが完了したときに、IStandaloneDiffEditorを引数として呼び出されます。