解决使用monaco-editor编译器，编译器展示内容没有超过编译器高度，但是出现滚动条问题

前言：

最近在完成项目时，有使用编译器进行在线编辑的功能，就选用了monaco-editor编译器，但是实现功能之后，发现即使在编译器展示的内容没有超过编译器高度的情况下，编译器依旧存在滚动条，会展示大量的空白，为了解决这个问题，笔者采用了多种方式进行尝试，最后终于解决，在此分享与各位小伙伴。

原本效果展示：

解决方案：添加scrollBeyondLastLine这个配置项

具体代码展示：

<template>
  <div class="container">
    <div class="code" ref="editorRef" />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue"
import * as Monaco from "monaco-editor"
const editorRef = ref(null)
const props = defineProps({
  code: {
    type: String,
    require: true
  },
  readOnly: {
    type: Boolean,
    require: true
  }
})

onMounted(() => {
    const editor = Monaco.editor.create(editorRef.value，{
      value: props.code,
      language: "json",
      theme: "vs-dark",
      readOnly: props.readOnly,
      scrollBeyondLastLine: false //设置编辑器是否可以滚动到最后一行之后（添加这一行）
        }
      })
    }
})
</script>