monacoEditor

说明

在线代码编辑器

使用

 <script setup lang="ts">
   import { MonacoEditor } from "liyao-vue-common"
 </script>
 
 <template>
  <MonacoEditor />
 </template>

可选参数

export const editorProps = {
    width: {
        type: [String, Number] as PropType<string | number>,
        default: '100%'
    },
    height: {
        type: [String, Number] as PropType<string | number>,
        default: '500px'
    },
    theme: {
        type: String as PropType<Theme>,
        validator(value: string): boolean {
            return ['vs', 'hc-black', 'vs-dark'].includes(value)
        },
        default: 'vs-dark'
    },
    options: {
        type: Object as PropType<Partial<Options>>,
        default() {
            return {
                automaticLayout: true,
                foldingStrategy: 'indentation',
                renderLineHighlight: 'all',
                selectOnLineNumbers: true,
                minimap: {
                    enabled: false
                },
                readOnly: false,
                contextmenu: true,
                fontSize: 16,
                scrollBeyondLastLine: false,
                overviewRulerBorder: false
            }
        }
    }
}

更多配置请查看MonacoEditor官方文档