Vue verwendet die Methode in der Referenzbibliothek mit Quellcode

importiere * als Monaco aus „monaco-editor/esm/vs/editor/editor.api“;

Funktion noop() { }

export { monaco };

Standard exportieren {
  Name: 'MonacoEditor',
  Requisiten: {
    diffEditor: { Typ: Boolean, Standard: false }, //Ob der Diff-Modus verwendet werden soll width: { Typ: [String, Number], Standard: '100%' },
    Höhe: {Typ: [Zeichenfolge, Zahl], Standard: '100 %'},
    Original: String, //Nur im Diff-Modus gültig. Wert: String,
    Sprache: {Typ: String, Standard: 'Javascript'},
    Thema: {Typ: String, Standard: 'vs'},
    Optionen: {Typ: Objekt, Standard() {Return {};}},
    editorMounted: {Typ: Funktion, Standard: noop},
    editorBeforeMount: {Typ: Funktion, Standard: noop}
  },

  betrachten:
    Optionen:
      tief: wahr,
      handler(Optionen) {
        dieser.editor und dieser.editor.updateOptions(Optionen);
      }
    },

    Wert() {
      dieser.editor und dieser.Wert !== dieser._getValue() und dieser._setValue(dieser.Wert);
    },

    Sprache() {
      wenn(!dieser.editor) returniere;
      if(this.diffEditor){ //Sprache im Diff-Modus aktualisieren
        const { original, geändert } = this.editor.getModel();
        monaco.editor.setModelLanguage(original, diese.Sprache);
        monaco.editor.setModelLanguage(geändert, diese.Sprache);
      }anders
        monaco.editor.setModelLanguage(dieser.editor.getModel(), diese.sprache);
    },

    Thema() {
      dieser.editor && monaco.editor.setTheme(dieses.thema);
    },

    Stil() {
      dieser.editor && dies.$nextTick(() => {
        dieser.editor.layout();
      });
    }
  },

  berechnet: {
    Stil() {
      zurückkehren {
        Breite: !/^\d+$/.test(diese.Breite) ? diese.Breite : `${diese.Breite}px`,
        Höhe: !/^\d+$/.test(diese.Höhe) ? diese.Höhe : `${diese.Höhe}px`
      }
    }
  },

  montiert () {
    dies.initMonaco();
  },

  vorZerstören() {
    dieser.editor und dieser.editor.dispose();
  },

  rendern (h) {
    zurückkehren (
      <div Klasse = "monaco_editor_container" Stil = {this.style}></div>
    );
  },

  Methoden: {
    initMonaco() {
      const { Wert, Sprache, Design, Optionen } = dies;
      Object.assign(options, this._editorBeforeMount()); //Vor der Initialisierung des Editors this.editor = monaco.editor[this.diffEditor ? 'createDiffEditor' : 'create'](this.$el, {
        Wert: Wert,
        Sprache: Sprache,
        Thema: Thema,
        ...Optionen
      });
      dieser.diffEditor und dieses._setModel(dieser.Wert, dieses.Original);
      this._editorMounted(this.editor); //Nachdem der Editor initialisiert wurde},

    _getEditor() {
      wenn(!dieser.editor) return null;
      diesen.diffEditor zurückgeben? diesen.editor.modifiedEditor: diesen.editor;
    },

    _setModel(value, original) { //Modell im Diff-Modus festlegen
      const { Sprache } = dies;
      const originalModel = monaco.editor.createModel(original, Sprache);
      const modifiedModel = monaco.editor.createModel(Wert, Sprache);
      dieser.editor.setModel({
        Original: Originalmodell,
        geändert: geändertesModell
      });
    },

    _setValue(Wert) {
      let editor = this._getEditor();
      wenn (Editor) returniere editor.setValue(Wert);
    },

    _getValue() {
      let editor = this._getEditor();
      wenn(!editor) return '';
      gibt editor.getValue() zurück;
    },

    _editorBeforeMount() {
      const-Optionen = this.editorBeforeMount(monaco);
      Rückgabeoptionen || {};
    },

    _editorMounted(Herausgeber) {
      dies.editorMounted(editor, monaco);
      wenn(dieser.diffEditor){
        editor.onDidUpdateDiff((Ereignis) => {
          konstanter Wert = this._getValue();
          this._emitChange(Wert, Ereignis);
        });
      }anders{
        editor.onDidChangeModelContent(Ereignis => {
          konstanter Wert = this._getValue();
          this._emitChange(Wert, Ereignis);
        });
      }
    },

    _emitChange(Wert, Ereignis) {
      this.$emit('ändern', Wert, Ereignis);
      dies.$emit('Eingabe', Wert);
    }
  }
}

<Vorlage>
  <div>
    <MonacoEditor ref="exampleEditor" width="100%" height="300" theme="vs-dark" language="javascript" :options="Optionen" @change="codeInput" />
  </div>
</Vorlage>
<Skript>
MonacoEditor aus „monaco-editor-vue“ importieren
Standard exportieren {
  Komponenten:
    MonacoHerausgeber
  },
  Daten() {
    zurückkehren {
    }
  },
  vorErstellen() {
  },

  montiert() {
  },
  Methoden: {
    dies.$refs.exampleEditor._setValue('')
  }
}