Skip to content

n-form-item 表单行 ​

标签 + 控件插槽 + 错误展示的表单行。放进 n-form 由其统一校验与布局默认值(条目 prop 留 null 跟随表单级配置);独立使用是纯布局行,不参与校验(无必填星号推导与错误显示)。

  1. 行内通常内嵌输入控件:根节点零交互绑定(App 端父容器交互绑定会拦截子控件触摸,输入法唤不起),点击语义由行内控件自行承载
  2. prop 是校验与错误显示的挂钩:留空为纯布局行;rules 优先于 n-form 的 rules 同名字段规则
  3. 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)。

记录 · 思考 · 创作