monaco-editor组件封装，直接拿去用

1、项目需要使用monaco-editor，手动封装了一下

<template>
  <div ref="monacoEditorRef" :style="style"></div>
</template>

<script>
import * as monaco from 'monaco-editor';
import { debounce } from 'lodash';

export default {
  name: 'Monaco',
  props: {
    width: { type: [String, Number], default: '100%' },
    height: { type: [String, Number], default: '100%' },
    code: { type: String, default: '// code \n' },
    language: { type: String, default: 'javascript' },
    theme: { type: String, default: 'vs-dark' }, // vs, hc-black
    options: { type: Object, default: () => ({}) },
    highlighted: {
      type: Array,
      default: () => [
        {
          number: 0,
          class: ''
        }
      ]
    },
    changeThrottle: { type: Number, default: 0 },
    viewMode: { type: Boolean, default: false }
  },
  data() {
    return {
      editor: null,
      defaults: {
        fontSize: 16, // 字体大小
        autoIndent: true, // 自动布局 aviator
        lineNumbers: 'on',
        automaticLayout: true, // 自动布局
        SeverityLevel: 'warning',
        selectOnLineNumbers: true,
        roundedSelection: false,
        cursorStyle: 'line',
        glyphMargin: true
      }
    };
  },
  computed: {
    style() {
      const { width, height } = this;
      const fixedWidth = width.toString().indexOf('%') !== -1 ? width : `${width}px`;
      const fixedHeight = height.toString().indexOf('%') !== -1 ? height : `${height}px`;
      return {
        width: fixedWidth,
        height: fixedHeight
      };
    },
    editorOptions() {
      return Object.assign({}, this.defaults, this.options, {
        value: this.code,
        language: this.language,
        theme: this.theme,
        readOnly: this.viewMode
      });
    }
  },
  watch: {
    language() {
      monaco.editor.setModelLanguage(this.editor.getModel(), this.language);
    },
    codes: {
      handler(val) {
        this.editor.setValue(val);
      },
      deep: true
    }
  },
  methods: {
    editorHasLoaded() {
      this.editor.onDidChangeModelContent(event => this.codeChangeHandler(this.editor, event));
      this.$emit('mountedEditor', this.editor);
    },
    codeChangeHandler() {
      if (this.codeChangeEmitter) {
        this.codeChangeEmitter(this.editor);
      } else {
        this.codeChangeEmitter = debounce(editor => {
          this.$emit('codeChange', editor);
        }, this.changeThrottle);
        this.codeChangeEmitter(this.editor);
      }
    },
    fetchEditor() {
      this.editor = monaco.editor.create(this.$refs.monacoEditorRef, this.editorOptions);
      this.editorHasLoaded(this.editor);
      // 监测窗口变化
      window.addEventListener('resize', this.resizeLayout());
    },
    resizeLayout() {
      this.editor.layout();
    },
    destroyMonaco() {
      if (typeof this.editor !== 'undefined') {
        this.editor.dispose();
        // 监测窗口变化
        window.removeEventListener('resize', this.resizeLayout(), false);
      }
    }
  },
  mounted() {
    this.fetchEditor();
  },
  destroyed() {
    this.destroyMonaco();
  }
};
</script>

模板部分

        <Monaco
          class="expression_script-monaco"
          width="700"
          height="250"
          :code="formValidate.expression_script"
          :change-throttle="500"
          theme="vs"
          :options="{}"
          @codeChange="handleCodeChange"
        />

样式部分

<style lang="less">
.expression_script-monaco {
  border: 1px solid #dcdfe6;
}
</style>

2、支持语言aviatorscript，进行自定义