数据录入与表单有已知边界

NnXmlCodeEditor XML 编辑器

XML 编辑、行号、诊断与语法高亮。

示例

API

Props

名称	类型	默认值	说明
value	string | number	''	XML 文本，配合 v-model:value。
rows	number | string	8	内部文本域原生行数。
placeholder	string	''	占位文字。
status	string	''	error、warning 使用对应状态样式。
disabled	boolean	false	禁用编辑。
readonly	boolean	false	原生只读状态，并在根节点增加 XML viewer 标记。
maxlength	number | string	—	原生最大长度。
bordered	boolean	true	是否显示边框。
lineNumbers	boolean	false	富渲染模式下显示行号；诊断提示也依赖该模式。
lightweight	boolean	false	强制仅使用普通文本域，不渲染高亮层、行号和诊断层。
diagnostics	XmlDiagnostic[]	[]	行级诊断；同一行文案会去重后以中文分号连接。

interface XmlDiagnostic {
    line?: number; // 优先使用，并限制到现有行范围
    index?: number; // line 缺失时按字符索引推导行号
    column?: number; // 最小为 1；同一行采用最小列号
    message?: string;
}

除 class、style 外的未声明属性会转发给内部 <textarea>；class、style 合并到编辑器根节点。

Events

事件	参数	说明
update:value	(value: string)	每次输入触发。
input	(event: InputEvent)	原生输入事件。
change	(event: InputEvent)	当前与 input 同时触发，不等待失焦。
pressEnter	(event: KeyboardEvent)	任意 Enter keydown 都会触发，包括正常换行。
focus	(event: FocusEvent)	原生 focus。
blur	(event: FocusEvent)	原生 blur。
keydown	(event: KeyboardEvent)	原生 keydown。
keyup	(event: KeyboardEvent)	原生 keyup。

Expose

名称	签名或值	说明
textarea	HTMLTextAreaElement 引用	内部原生元素。
highlight	HTMLElement 引用	富渲染模式的高亮 <pre>；否则为空。
focus	(options?: FocusOptions) => void	聚焦编辑区。
blur	() => void	移除焦点。
select	() => void	选择全部文本。

当前限制

• 组件只提供文本编辑、着色和展示诊断，不会解析、格式化或验证 XML。
• 内容超过 128 KiB 时会自动进入轻量模式；高亮、行号和诊断层都会关闭。诊断当前也只有开启 lineNumbers 且处于富渲染模式时可见。