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

eadela

已于 2023-11-29 15:00:52 修改

阅读量556

点赞数 2

文章标签： javascript 前端开发语言

于 2023-11-29 14:59:52 首次发布

本文链接：https://blog.csdn.net/eadela/article/details/134690319

版权

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