EpicDesigner文档

Appearance

EBuilder 生成器 ​

生成器

EBuilder 是一个页面构建组件，它可以将设计器生成的 JSON 配置构建成页面，功能包括组件渲染、事件绑定和数据回显等。

基础用法 ​

通过 JSON 渲染组件

输入框
vue
<template>
  <div>
    <EBuilder :pageSchema="pageSchema" />
  </div>
</template>
<script lang="ts" setup>
import { EBuilder } from "epic-designer";

const pageSchema = {
  schemas: [
    {
      type: "page",
      id: "root",
      children: [
        {
          label: "输入框",
          type: "input",
          field: "input",
          icon: "epic-icon-write",
          input: true,
          componentProps: {
            defaultValue: "",
            placeholder: "请输入",
            size: "default",
            type: "text",
          },
          id: "gbm1xhrrj5s00",
        },
      ],
      componentProps: {
        style: {
          padding: "16px",
        },
      },
    },
  ],
};
</script>

校验表单并获取数据 ​

输入框
数字输入框
选择框
请选择
单选框
vue
<template>
	<div>
		<EBuilder ref="ebForm" :pageSchema="pageSchema" />
  		<button @click="handleValidate">获取数据</button>
  	<div>
  {{formData}}
  </div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { EBuilder } from "epic-designer";

const pageSchema = {
  schemas: [
    {
      type: "page",
      id: "root",
      children: [
        {
          label: "表单",
          type: "form",
          icon: "epic-icon-qiapian",
          name: "default",
          componentProps: {
            labelWidth: 100,
            labelCol: {
              span: 5,
            },
            wrapperCol: {
              span: 19,
            },
            hideRequiredMark: false,
            labelPosition: "right",
            size: "default",
            requireAsteriskPosition: "left",
          },
          children: [
            {
              label: "输入框",
              type: "input",
              field: "input",
              icon: "epic-icon-write",
              input: true,
              componentProps: {
                defaultValue: "",
                placeholder: "请输入",
                size: "default",
                type: "text",
              },
              id: "7k6ajqpxhl000",
            },
            {
              label: "数字输入框",
              type: "number",
              icon: "epic-icon-number",
              field: "number",
              input: true,
              componentProps: {
                placeholder: "请输入",
                size: "default",
                controlsPosition: "default",
              },
              id: "i6x0mqlm6js00",
            },
            {
              label: "选择框",
              type: "select",
              icon: "epic-icon-xiala",
              field: "select",
              input: true,
              componentProps: {
                options: [
                  {
                    label: "选项1",
                    value: "选项1",
                  },
                  {
                    label: "选项2",
                    value: "选项2",
                  },
                ],
                placeholder: "请选择",
                size: "default",
                effect: "light",
                placement: "bottom-start",
              },
              id: "80gl3fnca3g00",
            },
            {
              label: "单选框",
              type: "radio",
              icon: "epic-icon-danxuan-cuxiantiao",
              field: "radio",
              input: true,
              componentProps: {
                options: [
                  {
                    label: "选项1",
                    value: "选项1",
                  },
                  {
                    label: "选项2",
                    value: "选项2",
                  },
                ],
                size: "default",
              },
              id: "2ggd4l3i109w0",
            },
          ],
          id: "eqf5rtg2ohc00",
        },
      ],
      componentProps: {
        style: {
          padding: "16px",
        },
      },
    },
  ],
};
    
const ebForm = ref(null)
const formData = ref(null)

async function handleValidate(){
  formData.value = {...(await ebForm.value.validate())}
}
</script>

重置表单 ​

姓名
vue
<template>
  <div>
    <EBuilder ref="ebRef" :pageSchema="pageSchema"> </EBuilder>
    <button @click="handleReset">重置数据</button>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { EBuilder, PageSchema } from "epic-designer";

const ebRef = ref<any>(null);

async function handleReset() {
  // 获取表单实例
  const form = await ebRef.value?.getFormInstance();
  // 调用组件实例方法，参考ui from 提供的重置方法，本案例以Ant Design Vue为基础UI
  form?.resetFields();
}
const pageSchema = ref<PageSchema>({
  schemas: [
    {
      type: "page",
      id: "root",
      label: "页面",
      children: [
        {
          label: "表单",
          type: "form",
          icon: "epic-icon-daibanshixiang",
          componentProps: {
            name: "default",
            labelWidth: 100,
            labelCol: {
              span: 5,
            },
            wrapperCol: {
              span: 19,
            },
            hideRequiredMark: false,
            labelPlacement: "left",
            labelAlign: "right",
            requireMarkPlacement: "right",
            size: "medium",
          },
          children: [
            {
              label: "姓名",
              type: "input",
              field: "input_sb6jhfb8",
              icon: "epic-icon-write",
              input: true,
              componentProps: {
                defaultValue: "",
                placeholder: "请输入",
                type: "text",
                size: "medium",
                disabled: false,
              },
              id: "input_sb6jhfb8",
            },
          ],
          id: "form_18vemlk8",
        },
      ],
      componentProps: {
        style: {
          padding: "16px",
        },
      },
    },
  ],
});

// 表单赋值
onMounted(async () => {
  setTimeout(() => {
    ebRef.value?.setData({
      input_sb6jhfb8: "自动填写的内容",
    });
  },200);
});
</script>

API ​

参数说明类型默认值版本
pageSchemaEDesigner 设计器生成的 json 数据json--
formData表单数据，用于数据回显(仅用于name为default的表单)FormDataModel-0.9.15
disabled禁用EBuilder所有输入项booleanfalse0.9.4

函数 ​

函数名称说明参数回调参数版本
setData设置表单数据，用于数据回显FormDataModel0.0.36
getData跳过验证直接获取表单数据-Promise
<Object | false>		0.0.36
validate验证表单并获取表单数据-Promise
<Object | false>		0.0.36
getFormInstance获取表单实例Promise
<Form | false>		0.9.4

事件 ​

事件名称说明参数版本
ready页面渲染完时触发