So verwenden Sie den JS-Code-Compiler Monaco

importiere * als monaco von 'monaco-editor' // Das Paket ist groß, aber die Demo ist lauffähig // Passe einige Vorschlagsfunktionen an const suggestions = [
  {
    Bezeichnung: 'split_chinese',
    insertText: 'split_chinese(inputString,language);', // Wird nicht angezeigt, wenn nicht geschrieben. .
    Details:
      'inputString: muss String teilen\n' +
      'Sprache:\nCH_T: traditionelles Chinesisch\nCH_S: vereinfachtes Chinesisch\n HK_T: traditionelles Hongkong\nTW_T: traditionelles Taiwan\n'
  },
  {
    Bezeichnung: "uuid",
    Text einfügen: 'var uuid = uuid();',
    Detail: „UUID generieren“
  },
  {
    Bezeichnung: 'HashMap',
    Text einfügen: 'var hashMap = new HashMap();',
    Detail: „Hash-Objekt erstellen“
  }
]

montiert() {
    monaco.languages.registerCompletionItemProvider('JavaScript', {
      provideCompletionItems() {
        zurückkehren {
          Vorschläge: Vorschläge
        }
      },
      triggerCharacters: [' ', '.'] // Schreibe die Zeichen, die die Eingabeaufforderung auslösen, es können mehrere sein })
    lass selbst = dies
    setzeTimeout(Funktion () {
      selbst.init()
    }, 50) //Da die übergeordnete Komponente den Parameter nicht übergeben hat, wurde die untergeordnete Komponente gerendert}
  
 // Initialisierungsmethode init(script) {
  lass selbst = dies
  wenn (Skript) dieser.Code = Skript
  self.$refs.container.innerHTML = ''
  var editor = monaco.editor.create(this.$refs.container, {
    Wert: dieser.code,
    Sprache: "Javascript",
    Minikarte:
      aktiviert: false
    },
    Schriftgröße: '12px',
    fixedOverflowWidgets: true // Verwenden Sie feste Attribute, um Widgets anzuzeigen, die die Editorgröße überschreiten})
  editor.onDidChangeModelContent(Funktion () {
    self.$emit('update:code', editor.getValue()) //Wird verwendet, um Inhaltsänderungen des Editors zu überwachen und den Inhalt an die übergeordnete Komponente weiterzugeben})
}

<Vorlage>
  <div ref="Container" Klasse="Monaco"></div>
</Vorlage>

<Stilbereich>
.monaco {
  Breite: 95 %;
  Höhe: 400px;
  Rand: 1px durchgezogen #dcdfe6;
  Textausrichtung: links;
  Rand rechts: 20px;
  Rahmenradius: 4px;
}
</Stil>