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

NnTextareaDrawer 文本抽屉

带草稿、校验和提交动作的文本编辑抽屉。

示例

API

Props

名称	类型	默认值	说明
open	boolean	false	受控可见状态，配合 v-model:open。
inputValue	string	''	已提交文本，配合 v-model:input-value；抽屉内输入期间只更新本地草稿。
title	string | number | object | unknown[] | (() => unknown)	'文本输入'	抽屉标题；title 插槽优先。
inputLabel	string | number	'内容'	文本域的表单标签。
width	string | number	500	右侧抽屉宽度，遵循 NnDrawer.width 的换算规则。
rows	number | string	8	文本域原生行数。
placeholder	string	''	文本域占位文字。
validator	(value: string) => ValidationResult | Promise<ValidationResult>	null	提交前执行的同步或异步校验函数；返回规则见下文。
invalidMessage	string	'输入内容无效'	校验返回 false、错误对象没有文案或 Promise 拒绝没有文案时使用。
submitText	string	'确定'	提交按钮文字。
cancelText	string	'取消'	取消按钮文字。
textareaProps	object	{}	透传给内部 NnTextarea；显式的 value、rows、placeholder、status 和更新监听由本组件控制。

type ValidationResult =
    | void
    | null
    | boolean
    | string
    | { valid?: boolean; status?: 'success' | 'warning' | 'error' | string; message?: string };

undefined、null、true、valid: true、status: 'success' 和 status: 'warning' 表示通过；字符串、 false、valid: false 或 status: 'error' 表示失败。校验失败时显示文案并重新聚焦文本域。

未声明的属性会透传给内部 NnDrawer，但本组件固定 placement="right"，并管理抽屉的 open、title、width 和关闭监听。

Events

事件	参数	说明
update:open	(false)	取消、抽屉关闭请求或成功提交后触发。
update:inputValue	(value: string)	仅在校验通过并提交时触发；普通输入不会发送。
submit	(value: string)	校验通过后触发，随后请求关闭。
cancel	(event: MouseEvent | KeyboardEvent)	取消按钮、关闭按钮或 Escape 等抽屉关闭请求触发；提交中会忽略请求。

Slots

名称	作用域参数	说明
title	—	替换抽屉标题。
extra	{ value: string }	放在文本表单项之后的内容。

当前限制

• 组件没有逐次输入事件，inputValue 只在成功提交时写回；取消会丢弃本次本地草稿。
• 抽屉方向固定为右侧，默认操作区固定为取消和确定按钮。