引入组件

局部引入

// parent.vue
const FFormItem = defineAsyncComponent(() => import('@/components/formaui/f-form-item/f-form-item.vue'))

基础用法

label 属性：标题文本

<f-form-item label="标题文本">
  <f-input padding="0" bg-color="transparent" :show-border-bottom="false" placeholder="文本输入框" />
</f-form-item>

右侧内容

使用 #right 插槽展示右侧内容

<f-form-item label="内容居右">
  <template #right>
    <f-switch v-model="checked" />
  </template>
</f-form-item>

必填与选择

isAsterisk 显示星号，showArrow + isHighlight 用于选择行

<f-form-item label="选择标题" is-asterisk show-arrow is-highlight @click="onSelect">
  <f-input padding="0" bg-color="transparent" :show-border-bottom="false" disabled placeholder="请选择" />
</f-form-item>

结合 f-form 校验

prop 对应 model 字段；父级 f-form 的 isShowMessage 设为 false，错误信息显示在表单项上

<f-form ref="formRef" :model="formData" :is-show-message="false">
  <f-form-item label="姓名" is-asterisk prop="name">
    <f-input v-model="formData.name" padding="0" bg-color="transparent" :show-border-bottom="false" />
  </f-form-item>
</f-form>

错误位置

errorPosition：1 标题左对齐，2 内容左对齐（默认），3 居右

<f-form-item label="身高" is-asterisk prop="height" :error-position="3">
  <f-input v-model="formData.height" padding="0" is-text-right :show-border-bottom="false" />
</f-form-item>

插槽

名称	说明
default	标题后内容（水平排列时）
right	右侧内容
row	上下排列时自定义显示内容

属性

名称	类型	说明	默认值
padding	string	内边距	28rpx 30rpx
marginTop	string	上外边距	0rpx
marginBottom	string	下外边距	0rpx
label	string	标题文本	-
labelFontSize	string	标题字体大小	32rpx
labelColor	string	标题颜色	#0B1D4A
labelFontWeight	number / string	标题字重	400
labelWidth	string	标题宽度	200rpx
labelPosition	`left` | `top`	标题位置	left
labelRight	string	标题距右侧内容间距	16rpx
labelBottom	string	标题下方间距	0rpx
isAsterisk	boolean	是否显示星号	false
asteriskColor	string	星号颜色	colors.danger
asteriskTop	string	星号 top	50%
asteriskLeft	string	星号 left	12rpx
bgColor	string	背景色	#fff
isHighlight	boolean	是否点击高亮	false
showArrow	boolean	是否显示右侧箭头	false
arrowColor	string	箭头颜色	var(--f-text-color-placeholder)
showBottomBorder	boolean	是否显示底部分割线	true
showBorder	boolean	是否显示边框	false
borderColor	string	边框/分割线色	var(--f-border-color)
lineLeft	string	底部分割线距左	0rpx
lineRight	string	底部分割线距右	0rpx
borderRadius	string	圆角	0
index	number / string	自定义参数，点击回传	0
prop	string	表单域字段，校验时必填	-
isAbsolute	boolean	错误提示是否绝对定位	true
errorPosition	number / string	错误位置：[1 标题左 / 2 内容左 / 3 右]	2
rules	object	校验规则	{}

事件

事件名	说明	回调参数
click	点击表单项	{ index }

方法

方法名	说明	传入参数
setRules	设置校验规则	rules
validate	校验当前项（需在 f-form 内）	value（可选）
clearValidate	清除验证信息	-