pet-front/pages/test/index.vue

<template>
	<view class="base-info">
		<view class="form-title">基本信息</view>
		<view class="box">
			<DForm :list="state.list" @submit="handleSubmit" />
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from "vue";
	import DForm from "@/components/dForm/index.vue"

	const state = reactive({
		list: [{
				type: "input",
				label: "姓名",
				key: "name",
				placeholder: "请输入您的真实姓名",
			},
			{
				type: "input",
				label: "身份证号",
				key: "idCard",
				placeholder: "请输入您的真实身份证号",
			},
			{
				type: "radio",
				label: "性别",
				key: "sex",
				options: [{
						name: "男"
					},
					{
						name: "女"
					}
				]
			},
			{
				type: "input",
				label: "年龄",
				key: "gender",
				placeholder: "请输入您的年龄",
			},
			{
				type: "input",
				label: "养宠经验",
				key: "shij",
				placeholder: "请输入您的养宠年限",
				unit: "年"
			},
		]
	})



	const handleSubmit = (val) => {
		console.log("获取参数", val)
	}
</script>

<style scoped>
	.base-info {
		width: 718rpx;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 28rpx;
	}

	.box {
		width: 680rpx;
		margin: 0 auto;
		background-color: #fff;
		padding: 0 36rpx;
		box-sizing: border-box;
	}
</style>