uniapp基于uview表单二次封装

最新推荐文章于 2023-09-11 14:09:28 发布

VIP文章 addU

最新推荐文章于 2023-09-11 14:09:28 发布

阅读量1k

点赞数 1

分类专栏： uni-app 文章标签： uniapp uview

本文链接：https://blog.csdn.net/flyinglf/article/details/126231619

版权

这是我的第二个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=