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