跳到主要内容

CodeEditorProps

Defined in: code-editor-vue/src/code-editor.types.ts:13

Vue CodeEditor 的公开属性。

Remarks​

与 Angular 的 inputs、React 的 props 同名同义;仅初始化生效的两项 (CodeEditorProps.autoFocus / CodeEditorProps.root)在各自条目上标注。

Properties​

autoFocus?​

readonly optional autoFocus?: boolean;

Defined in: code-editor-vue/src/code-editor.types.ts:21

挂载后立即聚焦编辑器。

Default Value​

false

Remarks​

仅挂载时读取一次,后续变更被忽略。disabled 或 readonly 为真时 不抢焦点 —— 否则用户得到一个无法输入、也无从得知为什么无法输入的控件。


describedBy?​

readonly optional describedBy?: string;

Defined in: code-editor-vue/src/code-editor.types.ts:28

补充说明元素的 id,写成内部 textbox 的 aria-describedby。

Remarks​

属性落在 CodeMirror 的 .cm-content 上 —— 承担 role="textbox" 的是它, 不是组件的宿主元素。空串按「未设置」处理。三端同名同义。


disabled?​

readonly optional disabled?: boolean;

Defined in: code-editor-vue/src/code-editor.types.ts:36

禁用:只读且不可编辑,并向辅助技术报告 aria-disabled。

Default Value​

false

Remarks​

与 readonly 是独立的两个属性,任一为真都会让编辑器不可编辑; 区别在于禁用还会写出 aria-disabled 并抑制 autoFocus。


highlightWhitespace?​

readonly optional highlightWhitespace?: boolean;

Defined in: code-editor-vue/src/code-editor.types.ts:42

显示空白字符。

Default Value​

false

indentUnit?​

readonly optional indentUnit?: string;

Defined in: code-editor-vue/src/code-editor.types.ts:48

一级缩进使用的字符串。

Default Value​

' '(两个空格,三端一致)

indentWithTab?​

readonly optional indentWithTab?: boolean;

Defined in: code-editor-vue/src/code-editor.types.ts:56

允许 Tab 键缩进。

Default Value​

false

Remarks​

打开后 Tab 不再移动焦点,键盘用户会被困在编辑器里 —— 这是可达性取舍, 三端默认一致地关闭。


label?​

readonly optional label?: string;

Defined in: code-editor-vue/src/code-editor.types.ts:79

可访问名称,写成内部 textbox 的 aria-label。

Remarks​

落点与 CodeEditorProps.describedBy 相同。


labelledBy?​

readonly optional labelledBy?: string;

Defined in: code-editor-vue/src/code-editor.types.ts:85

承担标签的元素 id,写成内部 textbox 的 aria-labelledby。

Remarks​

落点与 CodeEditorProps.describedBy 相同。


language?​

readonly optional language?: string;

Defined in: code-editor-vue/src/code-editor.types.ts:64

语法高亮语言名或别名;'' 与 'plaintext' 表示不高亮。

Default Value​

'sql'

Remarks​

查不到或 load() 失败时降级为纯文本并继续可用,同时发出 language-error 事件(见 CodeEditorEmits)。快速切换时只有最后一次请求生效。


languages?​

readonly optional languages?: readonly CodeEditorLanguageDescription[];

Defined in: code-editor-vue/src/code-editor.types.ts:73

候选语言列表;空列表表示不高亮。

Default Value​

SUPPORT_LANGUAGES

Remarks​

传内联字面量(:languages="[myLang]")是有成本的:每轮更新都是新数组, 而 watch 按引用触发。组件会再判断当前语言解析到的 description 是否真的换了 —— 只有真换了才重新 load(),但这层判断本身仍要跑,稳定引用(模块级常量或 computed)更省。


lineWrapping?​

readonly optional lineWrapping?: boolean;

Defined in: code-editor-vue/src/code-editor.types.ts:91

自动换行。

Default Value​

false

placeholder?​

readonly optional placeholder?: string;

Defined in: code-editor-vue/src/code-editor.types.ts:97

空文档时显示的占位文本。

Default Value​

''

readonly?​

readonly optional readonly?: boolean;

Defined in: code-editor-vue/src/code-editor.types.ts:105

只读:仍可聚焦、可选择、可复制,但不能改。

Default Value​

false

Remarks​

只挡编辑命令,不挡宿主同步 —— value 变化照样写进文档, 否则只读的受控用法直接失效。


root?​

readonly optional root?: Document | ShadowRoot;

Defined in: code-editor-vue/src/code-editor.types.ts:112

CodeMirror 挂载的 DOM 根,用于 Shadow DOM 场景。

Remarks​

仅挂载时读取一次 —— CodeMirror 无法在构造后改 root。 需要换 root 时请用 v-if 或 :key 强制重建组件。


setup?​

readonly optional setup?: CodeEditorSetup;

Defined in: code-editor-vue/src/code-editor.types.ts:118

CodeMirror 预设扩展集;null 表示不加载任何预设。

Default Value​

'basic'

theme?​

readonly optional theme?: CodeEditorTheme;

Defined in: code-editor-vue/src/code-editor.types.ts:124

主题。

Default Value​

'light'

value?​

readonly optional value?: string;

Defined in: code-editor-vue/src/code-editor.types.ts:133

文档内容,配合 v-model:value 使用。

Default Value​

''

Remarks​

不是严格受控:组件不会把用户编辑写回本属性,也不会在每次更新时 强行拉平文档。本属性变化时只同步公共前后缀之间的那一段差量,光标、选区与滚动位置都保留, 且不进 undo 栈。父组件忽略 update:value 时编辑器会保留用户输入。