monaco editor 代码编辑器全屏切换

思路

给全屏、恢复两个操作分别绑定监听事件，在事件回调函数中做对应的操作；
利用了Monaco editor 的layout()函数，在调用的过程中，动态传递width和height实现全屏和恢复初始的功能

预览

实现

// css操作
.editor-fullscreen {
     
  position: fixed !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  z-index: 1000;
}

// CodeEditor.vue
<template>
  <div class="the-code-editor-container" :id="editorFlag">
    <div>
      <i v-if="isMaximum" class="el-icon-rank" title="点击缩小" @click="minEditor"></i>
      <i v-else class="el-icon-full-screen" title="点击放大" @click="maxEditor"></i>
    </div>
    <div class="my-editor" ref="container"></div>
  </div>
</template>

<script>
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution'
import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution'
import 'monaco-editor/esm/vs/basic-languages/python/python.contribution'
import 'monaco-editor/esm/vs/editor/contrib/find/findController.js'

export default {
     
  name: 'codeEditor',
  props: {
     
    options: {
     
      type: Object,
      default () {
     
        return {
     
          language: 'shell' // shell、sql、python, json
        }
      }
    },
    value: {
     
      type: String,
      default: ''
    },
    editorFlag: {
     
      type: String
    }
  },
  data () {
     
    return {
     
      monacoInstance: null,
      isMaximum: false,
      originSize: {
     
        width: '',
        height: ''
      }
    }
  },
  watch: {
     
    '$route.query.name': {
     
      handler () {
     
        this.monacoInstance && this.monacoInstance.layout()
      }
    },
    value : {
     
      handler (nVal, oVal) {
     
        this.$route.query.jobId && this.monacoInstance && this.monacoInstance.setValue(this.value)
      }
    }
  },
  mounted () {
     
    setTimeout(() => {
     
      this.init()
    }, 500)
  },
  methods: {
     
    init () {
     
      // 初始化编辑器实例
      this.monacoInstance = monaco.editor.create(this.$refs['container'], {
     
        value: this.value,
        theme: 'vs-dark', // vs, hc-black, or vs-dark
        autoIndex: true,
        ...this.options
      })
      // 监听编辑器content变化事件
      this.monacoInstance.onDidChangeModelContent(() => {
     
        this.$emit('contentChange', this.monacoInstance.getValue())
      })
    },
    // 放大
    maxEditor () {
     
      this.isMaximum = true
      let dom = document.getElementById(this.editorFlag)
      this.originSize = {
     
        width: dom.clientWidth,
        height: dom.clientHeight
      }
      dom.classList.add('editor-fullscreen')
      this.monacoInstance.layout({
     
        height: document.body.clientHeight,
        width: document.body.clientWidth
      })
    },
    // 缩小
    minEditor () {
     
      this.isMaximum = false
      let dom = document.getElementById(this.editorFlag)
      dom.classList.remove('editor-fullscreen')
      this.monacoInstance.layout({
     
        height: this.originSize.height,
        width: this.originSize.width
      })
    },
  }
}
</script>

<style lang="less">
  .the-code-editor-container {
     
    width: 100%;
    height: 100%;
    position: relative;
    [class^="el-icon"] {
     
      font-size: 35px;
      cursor: pointer;
      position: absolute;
      right: 10px;
      top: 0;
      z-index: 9999;
      color: #fff;
    }
    .my-editor {
     
      width: 100%;
      height: 100%;
      overflow: auto;
    }
    .monaco-editor .scroll-decoration {
     
      box-shadow: none;
    }
  }
</style>