说明

在线代码编辑器

使用 

       <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官方文档

声明

作者： liyao

版权：本博客所有文章除特别声明外，均采用CCBY-NC-SA4.O许可协议。转载请注明!

链接： https://vp.xiaoying.org.cn/pages/ad2a8f/

最后更新于 2025-09-30 20:31 history