思路
给全屏、恢复两个操作分别绑定监听事件,在事件回调函数中做对应的操作;
利用了Monaco editor 的layout()函数,在调用的过程中,动态传递width和height实现全屏和恢复初始的功能
预览
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b7fb34404e1ba4b38990037a0e76b49d.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/31d0e57341c11a5900015ac5d42ae4e3.png)
实现
// css操作
.editor-fullscreen {
position: fixed !important;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100% !important;
z-index: 1000;
}
<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