《uni-app》vue3 数据驱动表单组件代码案例

11 0

在《uni-app》中使用 vue 3 开发数据驱动表单组件，可以充分利用 Vue 3 的响应式系统和组合式 API 来实现。以下是一个简单的数据驱动表单组件的代码案例，展示了如何创建一个动态表单，并根据数据模型渲染表单项，同时处理用户输入。

首先，我们需要一个表单数据模型和一个表单项组件。然后，在主组件中使用这些数据来渲染表单。

vue复制代码

	<template>
	<view class=”form-item”>
	<label :for=”field.name”>{{ field.label }}</label>
	<input
	v-if=”field.type === ‘text'”
	:type=”field.type”
	:name=”field.name”
	v-model=”formData[field.name]”
	@input=”updateValue”
	/>
	<!– 可以根据需要添加其他类型的表单项，如 select, checkbox 等 –>
	</view>
	</template>

	<script>
	export default {
	name: ‘FormItem’,
	props: {
	field: {
	type: Object,
	required: true
	},
	formData: {
	type: Object,
	required: true
	}
	},
	methods: {
	updateValue(event) {
	this.$emit(‘input’, {
	fieldName: this.field.name,
	value: event.target.value
	});
	}
	}
	};
	</script>

	<style scoped>
	.form-item {
	margin-bottom: 15px;
	}
	label {
	display: block;
	margin-bottom: 5px;
	}
	input {
	width: 100%;
	padding: 8px;
	box-sizing: border-box;
	}
	</style>

vue复制代码

	<template>
	<view class=”container”>
	<form @submit.prevent=”handleSubmit”>
	<form-item
	v-for=”(field, index) in formFields”
	:key=”index”
	:field=”field”
	:formData=”formData”
	@input=”handleInput”
	/>
	<button type=”primary” @click=”handleSubmit”>提交</button>
	</form>
	<view class=”form-result”>
	<pre>{{ formData }}</pre>
	</view>
	</view>
	</template>

	<script>
	import { ref, reactive } from ‘vue’;
	import FormItem from ‘./FormItem.vue’;

	export default {
	name: ‘DataDrivenForm’,
	components: {
	FormItem
	},
	setup() {
	const formFields = reactive([
	{ name: ‘username’, label: ‘用户名’, type: ‘text’ },
	{ name: ’email’, label: ‘邮箱’, type: ‘text’ },
	// 可以根据需要添加更多字段
	]);

	const formData = reactive({});

	const handleInput = ({ fieldName, value }) => {
	formData[fieldName] = value;
	};

	const handleSubmit = () => {
	console.log(‘提交的表单数据:’, formData);
	// 在这里处理表单提交，如发送到服务器
	};

	return {
	formFields,
	formData,
	handleInput,
	handleSubmit
	};
	}
	};
	</script>

	<style scoped>
	.container {
	padding: 20px;
	}
	.form-result {
	margin-top: 20px;
	background-color: #f5f5f5;
	padding: 10px;
	border-radius: 4px;
	}
	</style>

表单项组件 (FormItem.vue):
- 接收 field 和 formData 作为 props。
- 根据 field.type 渲染不同类型的表单项（本例中仅展示了文本输入框）。
- 使用 v-model 绑定 formData[field.name]，并在输入时触发 updateValue 方法。
- updateValue 方法通过 $emit 发送自定义事件，将字段名和值传递给父组件。
主组件 (DataDrivenForm.vue):
- 使用 Vue 3 的组合式 API (setup, ref, reactive)。
- 定义 formFields 数组来存储表单项的配置。
- 定义 formData 对象来存储表单数据。
- handleInput 方法用于更新 formData 中对应字段的值。
- handleSubmit 方法用于处理表单提交（本例中仅打印到控制台）。
- 使用 v-for 循环渲染 formFields 数组中的每个表单项。