Vue中使用monaco-edito，并封装成组件（最新vue代码编辑器，代码直接贴）

组件使用

<wzy-monaco-editor language="sql" :height="470" code="select id id from tb_app group by id"/>

<template>
  <div
    class="monaco-editor-container"
    :style="{ height: `${height}px` }"
    ref="container"
  ></div>
</template>

<script>
import * as monaco from "monaco-editor";
export default {
  name: "MyCodeEditor",
  props: {
    //  高度
    height: {
      type: Number,
      default: 300,
    },
    // 代码
    code: String,
    language: {
      type: String,
      default: "json",
    },
    // 禁用
    readonly: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      theme: "vs-dark",
      monacoEditor: undefined,
    };
  },
  created() {
    this.initEditor();
  },
  methods: {
    initEditor() {
      this.$nextTick(() => {
        this.monacoEditor = monaco.editor.create(this.$refs.container, {
          value: this.code,
          readOnly: this.readonly,
          theme: this.theme,
          language: this.language,
          automaticLayout: true,
        });
      });
    },
    getVal(){
      return this.monacoEditor.getValue();
    }
  },
  watch: {
    code(val) {
      this.monacoEditor.setValue(val);
    },
  },
};
</script>

<style scoped lang="scss">
.monaco-editor-container {
  width: 100%;
  overflow: hidden;
}
</style>