FenghuaDigitalDoorplatePhase1_ZheZhengDing/src/components/synForm/synForm.vue

<template>
	<view class="syn-form">
		<uni-forms
			ref="form"
			:model="formData"
			:rules="rules"
			:label-position="labelPosition"
			:label-width="labelWidth"
			:label-align="labelAlign"
			:border="border"
		>
			<uni-forms-item
				v-for="item in formItems"
				:key="item.prop"
				:label="item.label"
				:name="item.prop"
				:required="item.required">
				<uni-easyinput
					v-if="item.type === 'input'"
					:type="item.inputType"
					v-model="formData[item.prop]"
					:disabled="disabled"
					:placeholder="item.placeholder || '请输入'+item.label">
				</uni-easyinput>
				
			</uni-forms-item>
		</uni-forms>
		<button @click="submitForm">Submit</button>
	</view>
</template>

<script>
	export default {
		name:"synForm",
		props: {
			formItems: {
				type: Array,
				default: []
			},
			formData: {
				type: Object,
				default: {}
			},
			rules: {
				type: Object,
				default: {}
			},
			labelPosition: {
				type: String,
				default: 'left'
			},
			labelWidth: {
				type: Number,
				default: 90
			},
			labelAlign: {
				type: String,
				default: 'right'
			},
			border: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {

			};
		}
	}
</script>

<style scoped>
	/deep/ .uni-forms-item--border {
		padding: 5px 0;
	}
</style>