2.3

<template>

  <div id="code-editor" ref="codeEditorRef" style="min-height: 400px" />

</template>

<script setup lang="ts">

import * as monaco from "monaco-editor";

import { onMounted, ref, toRaw, withDefaults, defineProps } from "vue";

/*

 * 定义组件属性类型

 */

interface Props {

  value: string;

  handleChange: (value: string) => void;

}

const props = withDefaults(defineProps<Props>(), {

  value: "",

  handleChange: (v: string) => {

    console.log(v);

  },

});

const codeEditorRef = ref();

const codeEditor = ref();

onMounted(() => {

  if (!codeEditorRef.value) {

    return;

  }

  // Hover on each property to see its docs!

  codeEditor.value = monaco.editor.create(codeEditorRef.value, {

    value: props.value,

    language: "java",

    automaticLayout: true,

    colorDecorators: true,

    minimap: {

      enabled: true,

    },

    readOnly: false,

    theme: "vs-dark",

    // lineNumbers: "off",

    // roundedSelection: false,

    // scrollBeyondLastLine: false,

  });

  // 编辑 监听内容变化

  codeEditor.value.onDidChangeModelContent(() => {

    props.handleChange(toRaw(codeEditor.value).getValue());

  });

});

</script>

<style scoped></style>