components新建mForm组件
组件文档结构
以通用简单表单封装为例
<template>
<view>
<form @submit="formSubmit">
<view class="uni-warp">
<block v-for="(item, index) in form.data" :key="index" >
<view class="uni-list" :style="item.hide ? 'display:none' :'display:block' " >
<view class="uni-list-cell f-line" >
<view class="w225 flex flex-direction-row f-title f-line" v-if="item.label != '' " >
<text class="requiredred" v-if="item.required">*</text>
<view class="uni-list-cell-left">{
{
item.label}}:</view>
</view>
<view :class="item.label == '' ? 'uni-list-cell-db' : 'uni-list-cell-db f-int'" >
<block v-if="item.ktype == 'picker' " >
<!-- <input class="uni-input uni-hidden" type="text" :name="item.name" :disabled="item.disabled" :value="pdate[index].value"/> -->
<picker :name="item.name" :mode="item.type" :disabled="item.disabled" :value="item.value" :start="item.start" :end="item.end" @change="bindDateChange($event,index)">
<view class="uni-input">{
{
pdate[index].value}}</view>
</picker>
</block>
<block v-else-if="item.ktype == 'defaultpicker' ">
<input class="uni-input uni-hidden" type="text" :name="item.name" :value="pindex[index].value" :disabled="item.disabled"/>
<picker @change="bindPickerChange($event,index)" :disabled="item.disabled" :value="pindex[index].cindex" :range="item.array" range-key="name" >
<view class="uni-input">{
{
item.array[pindex[index].cindex].name}}</view>
</picker>
</block>
<block v-else-if="item.ktype == 'radio'">
<input class="uni-input uni-hidden" :name="item.name" type="text" :value="radioVal[index].value"/>
<radio-group class="uni-radio-group" :disabled="item.disabled" @change="radioChange($event,index)" >
<label class="uni-list-cell-pd" v-for="(itemradio, radioIndex) in item.array" :key="itemradio.value">
<view class="uni-f-radio">
<radio color="#9F0000" style="transform:scale(0.6)" :disabled="item.disabled" :value="itemradio.value" :checked="radioVal[index].value === itemradio.value" />
</view>
<view class="uni-f-radioName">{
{
itemradio.name}}</view>
</label>
</radio-group>
</block>
<block v-else-if="item.ktype == 'input' && item.type =='text' ">
<input :style="item.disabled ? 'color:#505050' : ' '" :value="item.value" :name="item.name" type="text" :placeholder="item.placeholder" :disabled="item.disabled"/>
</block>
<block v-else-if="item.ktype == 'textarea' ">
<textarea v-if="item.height != undefined" :name="item.name" :placeholder="item.placeholder" :value="item.value" :disabled="item.disabled" :style="{height:item.height+'px'}"/>
<textarea v-else auto-height :name="item.name" :placeholder="item.placeholder" :value="item.value" :disabled="item.disabled" :style="{height:item.height+'px'}"/>
</block>
<block v-else-if="item.ktype == 'rate' ">
<uni-rate :value="item.value" color="#bbb" :disabled="item.disabled" active-color="red" :is-fill="false" />
</block>
</view>
</view>
<!-- </view> -->
</view>
</block>