预览地址:表单编辑器http://112.124.46.62/
目前已经完成了表单基本字段的配置设置
包括双向绑定变量名配置、各表单字段key配置、表单模式配置。
代码生成预览也已经完成。后续将继续完善表单复杂逻辑校验配置,以及完善表单可配置的选项。
附上生成的代码:
<template>
<a-form v-model="info" :rules="rules" layout="vertical">
<a-form-item label="年龄" name="age">
<a-input
placeholder="请输入内容"
:min="0"
:max="120"
v-model:value="info.age"
type="number"
>
</a-input>
</a-form-item>
<a-form-item label="姓名" name="name">
<a-input placeholder="请输入姓名" v-model:value="info.name"> </a-input>
</a-form-item>
<a-form-item label="爱好" name="lovely">
<a-textarea placeholder="请输入爱好" v-model:value="info.lovely">
</a-textarea>
</a-form-item>
<a-form-item label="出生日期" name="birthday">
<a-date-picker placeholder="请选择出生日期" v-model:value="info.birthday">
</a-date-picker>
</a-form-item>
</a-form>
</template>
<script steup>
import { ref } from "vue";
const info = ref({
age: undefined,
name: undefined,
lovely: undefined,
birthday: undefined
});
const rules = ref({
age: [{ required: true, message: "请输入年龄" }],
name: [{ required: true, message: "请输入姓名", type: "string" }],
lovely: [{ required: false, message: "请输入", type: "string" }],
birthday: [{ required: true, message: "请选择日期" }],
});
</script>
效果也是很不错的