简介
什么是 formily.top?
Formily 是阿里开源的前端表单解决方案,包含低代码设计器,可以拖拽生成表单代码。
由于官方已停止维护,特别是低代码表单设计器 Designable,连官网都没有,对于二次开发来说上手成本较高,这也是本站 formily.top 搭建的目的之一。
formily.top 是基于 Alibaba Formily 二次开发的表单、静态页面低代码解决方案,目前主要应用在 Vue3 项目中,它包含下面几个模块:
- 基于 Formily Designable 二次开发的低代码设计器 design.formily.top
- 基于 Vue3 + Koa.js + MongoDB 的低代码配置列表、编辑、预览(前后端增删改查)config.formily.top、api.formily.top
下面是一个最基本的示例:
vue
<template>
<FormilyView :configId="configId" @confirm="confirm" />
</template>
<script setup lang="ts">
import { FormilyView } from "@niceone/formily-comp";
const configId: string = "QJQkCJlOQ6wrZ00H"; // 低代码配置 ID
const confirm = (formData) => {
console.log("confirm", formData, formData.name); // 获取表单数据
};
</script>
实现细节
- 基于 @formily/element-plus 二次扩展开发的 @niceone/formily-element-plus 组件库,用于扩展设计器支持的组件
- 针对低代码的应用场景,简化低代码引入,二次封装的 @niceone/formily-comp 组件
- Vue3 项目低代码应用场景,demo 展示:vue.formily.top