vue3 + ant-design-vue 可视化表单 表单代码生成

可视化表单生成: 利用可视化平台快速生成基于and-design-vue的表单代码快乐摸鱼.快速生成调查问卷表单页面https://gitee.com/xujiaqi1833/form-code-generate-antd

预览地址:表单编辑器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>

效果也是很不错的