基于uni-app的动态表单

一、应用场景和意义

可以通过配置字段和校验规则，快速完成页面开发、提升开发效率

二、应用前提

形成ui/业务规范，最好是应用在问卷调查之类的业务

三、动态表单的功能

字段报错、快速滚动定位报错信息、支持字段值和字段规则拆分，便于实现复杂的表单交互

四、动态表单支持的组件类型

1、input-text 文本输入框类型

<template v-if="item.type === 'input-text'">

<view class="formItemBox">

<view class="formItem">

<view class="left">

<view class="num" v-if="num">{ { index + 1 }}.</view>

<view v-if="item.redTip" class="colorRed">{ { item.redTip ? '*' : ''

}}

</view>

<view class="name">{ { item.label }}</view>

</view>

<view class="right">

<u-form-item>

<view v-if="item.readonly || disabledFields.includes(item.id)"

@click="showNoEdit" class="readonlytext">{ { form[item.id] }}

</view>

<u--input v-else style="width: 100%;" v-model="form[item.id]"

input-align="right" :placeholder="item.placeholder"

:placeholderStyle="placeholderStyle"

border="none"></u--input>

</u-form-item>

</view>

</view>

<u-form-item labelWidth="0" :prop="item.id" class="formItemNoBody">

</u-form-item>

<view class="line" v-show="formItem.list.length - 1 > index"></view>

</view>

</template>

支持正常的输入校验 和 不可编辑的样式和提示

2、single-select 单选

<template v-if="item.type === 'single-select'">

<view class="formItemBox">

<view class="formItem">

<view class="left">

<view class="num" v-if="num">{ { index + 1 }}.</view>

<view v-if="item.redTip" class="colorRed">{ { item.redTip ? '*' : ''

}}

</view>

<view class="name">{ { item.label }}</view>

</view>

<view class="right optItemBox">

<view class="optItem" @click.stop="showNoEditOrSelect(item)"></view>

<u-form-item>

<view v-if="item.readonly || disabledFields.includes(item.id)"

class="readonlytext">{ { form[item.id] }}</view>

<view v-else class="select_right">

<view v-if="!form[item.id]" class="placeholderStyle">

{ { item.placeholder }}</view>

<view v-else class="select_right_text">

{ { item.listMap[form[item.id]] &&

item.listMap[form[item.id]].name || '未匹配到' }}

</view>

</view>

<view v-show="false">

<u--input style="width: 100%;" v-model="form[item.id]"

input-align="right" :placeholder="item.placeholder"

:placeholderStyle="placeholderStyle"

border="none"></u--input>

</view>

<view class="arrow_right_icon">

<img src="./icon/arrow.png" alt="">

</view>

</u-form-item>

</view>

</view>

<u-form-item labelWidth="0" :prop="item.id" class="formItemNoBody">

</u-form-item>

<view class=&#