uni-app 组件封装/调用方法

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>