表单项 Field

表单 · 展示组件

字段标签和错误提示

按需导入wbbb-ui/components/field

基础用法

示例代码

<script setup lang="ts">
import { WbbbField } from 'wbbb-ui/components/field'
import 'wbbb-ui/styles/field'
</script>

<template>
  <WbbbField />
</template>

真实移动端预览新窗口打开 ↗

状态与交互

以下状态均可在右侧的真实 Playground 中操作与验收。

默认已填写焦点禁用错误

API 参考

属性（Props）

属性	说明	类型	默认值	必填
label	设置字段或项目的可见标签。	string	''	否
labelWidth	设置表单标签预留的宽度。	WbbbNumeric	undefined	否
prop	将表单项关联到表单模型中的字段键。	string	''	否
required	是否将字段标记为必填以用于校验或展示。	boolean	false	否
rules	提供表单或字段的校验规则。	WbbbFormRule \| WbbbFormRule[]	undefined	否
value	提供展示值或项目值。	unknown	undefined	否

事件（Events）

无

插槽（Slots）

• default

双向绑定

不支持 v-model。

平台说明

构建验证：H5、App Vue、微信小程序、支付宝小程序与抖音小程序。

运行时差异：H5 支持键盘焦点与减弱动效；小程序端使用等价触控交互。上传、日期选择和服务弹层应在目标端再次验收。

使用提示：更多状态组合和跨端表现请在 Playground 中验证。