这是我的第二个uniapp项目,前一个主要使用thor-ui组件,目前这个是uview,听说这个框架更好用一些,我也是第一次使用,不足之处,慢慢改进。
页面样式:
代码 :
common-form.vue
<template>
<view>
<u--form :model="form" ref="uForm" :rules="rules" :labelWidth="labelWidth" labelPosition="top">
<u-form-item :label="item.label" :prop="item.prop" v-for="(item) in formData" :key="item.prop"
:required="item.isRule === '1'"
customStyle="padding:16upx 32upx;background:#fff;margin-top:32upx;" class="form-item"
@click="handleFormItem(item)">
<!-- 输入框 -->
<u-input v-model="form[item.prop]" :placeholder="placeholder" border="none" clearable v-if="item.type=='input'"/>
<number v-if="item.type=='number'" :itemData="item" @ok="setFormProp"/>
<!-- 文本域 -->
<u--textarea v-model="form[item.prop]" placeholder="请输入内容" v-if="item.type=='textarea'" border="none" customStyle="padding:0" :height="20 * item.rows"></u--textarea>
<textarea v-model="form[item.prop]" placeholder="请输入内容" v-if="item.type=='TextContent'" disabled="true" border="none" customStyle="padding:10upx" :height="20 * item.rows"></textarea>
<!-- 单选框 -->
<u-radio-group v-model="form[item.prop]" v-if="item.type == 'radio'" placement="column">
<u-radio :label="radio.label" :name="radio.value" :class="[radioIndex!==0?'u-mt-40': 'u-mt-16','radio']" v-for="(radio,radioIndex) in item.options" :key="radio.value"></u-radio>
</u-radio-group>
<!-- 复选框 -->
<u-checkbox-group
v-model="form[item.prop]"
placement="column"
v-if="item.type == 'checkbox'"
activeColor="#0054A3"
class="checkbox-group">
<u-checkbox
:customStyle="{marginBottom: '8px'}"
v-for="(item, index) in item.options"
:key="index"
:label="item.label"
:name="item.value"
class="u-mb-32"
>
</u-checkbox>
</u-checkbox-group>
<!-- 时间 -->
<template v-if="isShowDate(item)">
<!-- <u-input v-model="form[item.prop]" placeholder="请选择" border="none" clearable readonly/> -->
<view class="u-content-color">
{
{
translateTime(form[item.prop]) }}
</view>
<u-icon
slot="labelTop-Right"
name="arrow-right" color="#a9a9a9" size="18" v-if="!form[item.prop]">
</u-icon>
<u-icon
slot="labelTop-Right"
name="close-circle-fill" color="#a6a6a6" size="18" @click.native.stop="form[item.prop]=''" v-else>
</u-icon>
</template>
<!-- 图片 -->
<template v-if="item.type == 'file'">
<view class="" slot="labelTop-Right" @click="uploadImage">
<u-icon name="photo" size="25" color="#363636"></u-icon>
</view>
<view class="u-rela u-mr-32" v-for="(image,index) in form[item.prop]" :key="index">
<u--image :src="image" radius="2" width="90upx" height="90upx" @click.native.stop="previewImage(image)"></u--image>
<view class="image-close u-flex-xy-center" @click="handleDeleteImage(item.prop,index)">
<u-icon name="close" color="#fff" size="12"></u-icon>
</view>
</view>
</template>
<!-- 选择器 -->
<template v-if="item.type == 'select'">
<!-- <u-input v-model="form[item.prop]" placeholder="请选择" border="none" clearable readonly v-if=