n-form-item 表单行
标签 + 控件插槽 + 错误展示的表单行。放进 n-form 由其统一校验与布局默认值(条目 prop 留 null 跟随表单级配置);独立使用是纯布局行,不参与校验(无必填星号推导与错误显示)。
- 行内通常内嵌输入控件:根节点零交互绑定(App 端父容器交互绑定会拦截子控件触摸,输入法唤不起),点击语义由行内控件自行承载
prop是校验与错误显示的挂钩:留空为纯布局行;rules优先于 n-form 的 rules 同名字段规则required只是星号显示性标记(不新增校验);不传时按规则含 required 自动推导
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
API
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| label | 标签文字;留空且未用 label 插槽时不渲染标签区 | String | "" | - |
| prop | 对应表单数据对象的字段名(支持 a.b 点路径取嵌套值);留空为纯布局行,不参与校验 | String | "" | - |
| required | 显示必填星号(显示性标记,不新增校验;不传时按规则含 required 自动推导) | Boolean | false | - |
| rules | 条目级校验规则;优先于 n-form 的 rules 同名字段规则 | Array | null | - |
| border-bottom | 行底分隔线(error-type 为 border-bottom 时错误态显示红线);留 null 跟随 n-form | Boolean | null | - |
| label-position | 标签位置:left 水平排在控件左侧,top 堆叠在控件上方;留 null 跟随 n-form | String | null | left / top |
| label-align | 水平排列时标签文字对齐;留 null 跟随 n-form | String | null | left / center / right |
| label-valign | 水平排列时标签相对控件的纵向对齐(控件为多行内容时生效);留 null 跟随 n-form | String | null | top / center / bottom |
| label-width | 标签宽度 px(水平排列时生效);留 null 跟随 n-form | Number | null | - |
| label-style | 标签行内样式(非空时覆盖 n-form 的 label-style) | String | "" | 与 css 相同 |
| asterisk-position | 必填星号位置;留 null 跟随 n-form | String | null | left / right |
| show-message | 显示错误文字(error-type 为 message 时生效);留 null 跟随 n-form | Boolean | null | - |
| error-type | 错误展示通道:message 控件下方错误文字 / border-bottom 行底红线 / none 不展示;留 null 跟随 n-form(toast 通道由表单级统一控制,条目不提供) | String | null | message / border-bottom / none |
| error-style | 错误文字行内样式,如 "font-size:13px" | String | "" | 与 css 相同 |
| custom-class | 挂到根节点的额外 class(类需定义在组件样式表内) | String | "" | - |
| custom-style | 根节点行内样式,如 "margin-bottom:14px" 用于无边框行拉开间距 | String | "" | 与 css 相同 |
事件
无(行内内嵌输入控件,根节点零交互绑定,见顶部说明;点击语义由行内控件自行承载)。
方法(经组件 ref 调用)
| 方法名 | 说明 | 参数 |
|---|---|---|
| validate | 校验本字段,返回错误信息(null = 通过;独立使用或无 prop 时恒通过) | - |
| clearValidate | 清除本字段的错误显示 | - |
插槽
| 插槽名 | 说明 |
|---|---|
| default | 控件内容(输入框 / 选择器 / 开关等) |
| label | 自定义标签区(整段替换标签文字与星号排布;星号仍由组件按规则渲染在插槽外侧) |
| error | 自定义错误展示(作用域参数 error 为错误信息;仅 error-type 为 message 时渲染) |
实现说明
机制对照(参考源并集 → 本库实现):条目不自持错误状态(全部读表单上下文错误表,单一事实源);标签 / 星号 / 错误 / 分隔线全部常驻节点 + v-show 切显隐——行内插槽持有输入框焦点与输入法状态,整根重建会打断输入、v-if 插拔触发 App 端不重绘;参考源的行点击、箭头、按压反馈等交互特性不收(与零交互纪律冲突,需要点击的行用 n-cell)。