Vueはソースコード付きのリファレンスライブラリのメソッドを使用します

'monaco-editor/esm/vs/editor/editor.api' から * を monaco としてインポートします。

関数noop() { }

エクスポート { モナコ };

エクスポートデフォルト{
  名前: 'MonacoEditor'、
  小道具: {
    diffEditor: { type: Boolean, default: false }, // diff モードを使用するかどうか width: { type: [String, Number], default: '100%' },
    高さ: {タイプ: [文字列、数値]、デフォルト: '100%'},
    オリジナル: 文字列, // 差分モードでのみ有効 値: 文字列,
    言語: {タイプ: 文字列、デフォルト: 'javascript'},
    テーマ: {タイプ: 文字列、デフォルト: 'vs'},
    オプション: {type: Object, default() {return {};}},
    editorMounted: {タイプ: Function、デフォルト: noop},
    editorBeforeMount: {タイプ: 関数、デフォルト: noop}
  },

  時計：
    オプション:
      深い：本当、
      ハンドラ(オプション) {
        this.editor && this.editor.updateOptions(オプション);
      }
    },

    価値（） {
      this.editor && this.value !== this._getValue() && this._setValue(this.value);
    },

    言語（） {
      if(!this.editor) 戻り値:
      if(this.diffEditor){ // diffモードで言語を更新
        const { オリジナル、変更済み } = this.editor.getModel();
        monaco.editor.setModelLanguage(オリジナル、this.language);
        monaco.editor.setModelLanguage(変更済み、this.language);
      }それ以外
        モデル言語を設定します。
    },

    テーマ（） {
      this.editor && monaco.editor.setTheme(this.theme);
    },

    スタイル() {
      this.editor && this.$nextTick(() => {
        エディタのレイアウトをカスタマイズします。
      });
    }
  },

  計算: {
    スタイル() {
      戻る {
        幅: !/^\d+$/.test(this.width) ? this.width: `${this.width}px`,
        高さ: !/^\d+$/.test(this.height) ? this.height: `${this.height}px`
      }
    }
  },

  マウントされた（）{
    これは、Monaco を初期化します。
  },

  破棄する前に() {
    this.editor と this.editor.dispose();
  },

  レンダリング (h) {
    戻る （
      <div class="monaco_editor_container" style={this.style}></div>
    );
  },

  メソッド: {
    initMonaco() {
      const { 値、言語、テーマ、オプション } = this;
      Object.assign(options, this._editorBeforeMount()); //エディターの初期化前 this.editor = monaco.editor[this.diffEditor ? 'createDiffEditor' : 'create'](this.$el, {
        値: 値、
        言語: 言語、
        テーマ: テーマ、
        ...オプション
      });
      this.diffEditor && this._setModel(this.value, this.original);
      this._editorMounted(this.editor); //エディターが初期化された後},

    _getEditor() {
      if(!this.editor) は null を返します。
      this.diffEditor を返します。this.editor.modifiedEditor : this.editor;
    },

    _setModel(value, original) { //diffモードでモデルを設定する
      const { 言語 } = this;
      元のモデルを monaco.editor.createModel(元のモデル、言語);
      定数 modifiedModel = monaco.editor.createModel(値、言語);
      this.editor.setModel({
        オリジナル: オリジナルモデル、
        変更: modifiedModel
      });
    },

    _setValue(値) {
      エディターを this._getEditor() にします。
      if(editor) は editor.setValue(value) を返します。
    },

    _getValue() {
      エディターを this._getEditor() にします。
      if(!editor) '' を返します。
      editor.getValue() を返します。
    },

    _editorBeforeMount() {
      const オプション = this.editorBeforeMount(monaco);
      オプションを返します || {};
    },

    _editorMounted(エディター) {
      this.editorMounted(エディター、モナコ);
      if(this.diffEditor){
        editor.onDidUpdateDiff((イベント) => {
          定数値 = this._getValue();
          this._emitChange(値、イベント);
        });
      }それ以外{
        editor.onDidChangeModelContent(イベント => {
          定数値 = this._getValue();
          this._emitChange(値、イベント);
        });
      }
    },

    _emitChange(値、イベント) {
      this.$emit('change', 値, イベント);
      this.$emit('入力', 値);
    }
  }
}

<テンプレート>
  <div>
    <MonacoEditor ref="exampleEditor" width="100%" height="300" theme="vs-dark" language="javascript" :options="options" @change="codeInput" />
  </div>
</テンプレート>
<スクリプト>
'monaco-editor-vue' から MonacoEditor をインポートします。
エクスポートデフォルト{
  コンポーネント:
    モナコ編集者
  },
  データ（） {
    戻る {
    }
  },
  作成前() {
  },

  マウント() {
  },
  メソッド: {
    this.$refs.exampleEditor._setValue('')
  }
}