Appearance
CodeMirror
代码编辑器,基于codemirror-editor-vue3再次封装
vue3 的代码镜像组件,开箱即用的代码编辑器组件。此组件基于Codemirror 5 并且只支持 vue3。
CodeMirror 是一个用 JavaScript 为浏览器实现的多功能文本编辑器。它专门用于编辑代码,并带有许多语言模式和插件,可实现更高级的编辑功能。
基础用法
属性
| 属性名 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| model-value | 编辑器内容 | string | ||
| options | codemirror5 的镜像配置选项 | options | ||
| placeholder | 占位文字 | string | ||
| border | 是否显示编辑器边框 | boolean | false | |
| width | 宽度 | string/number | 100% | |
| height | 高度 | string/number | 100% | |
| originalStyle | 原始样式,禁用样式修改(但不影响宽度、高度和边框) | boolean | false | |
| keepCursorInEnd | 鼠标保持在最后一行 | boolean | false | |
| merge | 合并模式,也可以用作差异模式 | boolean | false | |
| name | 名称 | string |
事件
| 事件名 | 说明 | 参数 |
|---|---|---|
| change | 编辑器内容发生变化时触发 | val,编辑器的内容,cm:组件实例 |
| input | 编辑器输入内容时触发 | val,编辑器的内容 |