主题
FormField 表单字段包装
该组件用于在部分平台向原生表单传递自定义组件数据。官网在单选和复选组件说明中列出它的 hidden 配置;以下补充本地源码中的实际属性。
支持平台
官网未单独列出该组件的平台矩阵;本地源码包含微信、百度、QQ 小程序和 H5 的表单字段条件编译配置,其他平台请以实际验证为准。
基础用法
vue
<!-- 在原生表单中包装自定义字段 -->
<fui-form-field :value="selectedValues">
<!-- 自定义选择内容 -->
<view>选择内容</view>
</fui-form-field>属性
| 属性 | 类型 | 说明 | 默认值来源 |
|---|---|---|---|
| hidden | Boolean | 是否隐藏包装内容 | false(官网) |
| value | Number / String / Array | Vue 2 对应的字段值 | 空字符串(本地源码) |
| modelValue | Number / String / Array | Vue 3 对应的字段值 | 空字符串(本地源码) |
插槽和平台说明
默认插槽放置包装内容。源码为微信、百度、QQ 小程序及 H5 配置了对应的表单字段行为;组件声明了 input 和 update:modelValue 事件,但源码本身没有主动触发它们,不应依赖该包装器单独完成双向绑定。
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| input | 本地声明,组件源码未主动触发 | — |
| update:modelValue | 本地声明,组件源码未主动触发 | — |
官网未单独列出该组件的事件。
插槽
| 插槽 | 说明 |
|---|---|
| default | 需要包装的表单字段内容 |