基于 Microsoft monaco-editor 封装的 Vue 3 代码编辑器组件,开箱即用,重点解决「代码编辑」和「代码比对」两类常见场景。
核心功能:
双模式:base(普通代码编辑)与 diff(左右对照的代码比对),一个组件切换。
双向绑定:base 用 v-model;diff 用 v-model:originalData + v-model:modifiedData。
多主题:vs、vs-dark、hc-black、hc-light。
多语言高亮与补全:JSON、CSS/SCSS/LESS、HTML、TS/JS 等,并可传入 diySuggest 自定义代码提示项(label / kind / insertText / detail / documentation)。
实用细节:insertText() 方法插入文本、@select 事件实时回调选中内容、placeholder、disabled(diff 模式下左右可分别禁用)。
配置收敛:通过 config 统一收口 wordWrap、lineNumbers、autoClosingBrackets、cursorBlinking 等常用 Monaco 选项,默认值已调好(如关闭右键菜单、关闭超出末行滚动、automaticLayout 开启)。
消除副作用:处理了 monaco-editor 常见的样式/实例副作用问题。
点击空白处退出提示









评论