Loading repository data…
Loading repository data…
haixin-fang / repository
A visual form designer/generator base on Vue.js, make form development simple and efficient.(基于Vue3的可视化表单设计器,拖拽式操作让你快速构建一个表单, 让表单开发简单而高效。)
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
Starfish 可视化动态表单平台. 完全采用 ECMAScript 模块(ESM)规范来编写和组织代码,使用了最新的 Vue3、Vite、Element-Plus、TypeScript 等主流技术开发
https://haixin-fang.github.io/vue-form-design/playground/index.html
可以简称starfish设计器,是一个功能强大、开箱即用的拖拽式低代码设计器。它基于 Vue3 开发,可以让开发者根据自己的需求自由扩展和定制组件。此外,vue-form-design 使用 JSON 配置来生成页面,可帮助开发者快速生成页面,提高开发效率。它提供了两个重要组件:starfish-editor 设计器和 starfish-form 生成器。
node.js >= 16
先安装 pnpm
$ npm install -g pnpm
然后安装依赖
$ pnpm bootstrap
执行命令
$ pnpm pg
最后在浏览器中打开
即可得到一个动态表单项目
使用 monorepo 架构,该项目分为多个代码包,有 starfish-form 表单生成器, starfish-editor 表单设计器
feat 增加新功能fix 修复问题/BUGstyle 代码风格相关无影响运行结果的perf 优化/性能提升refactor 重构revert 撤销修改test 测试相关docs 文档/注释build 对构建系统或者外部依赖项进行了修改chore 依赖更新/脚手架配置修改等workflow 工作流改进ci 持续集成types 类型定义文件更改wip 开发中Pull Request:
git checkout -b feat/xxxxgit commit -am 'feat(function): add xxxxx'git push origin feat/xxxxpull requeststarfish-editor 是一个可视化设计器组件,用户可以通过拖拽组件的方式快速生成 JSON 配置。它提供了丰富的组件库和配置项,用户可以根据需要选择合适的组件并配置相应的属性、事件和动作。设计器还提供了实时预览功能,用户可以随时查看所设计页面的效果。最终,用户可以将 JSON 配置导出,用于页面的生成和修改。
starfish-form 是一个页面构建组件,它可以将设计器生成的 JSON 配置构建成页面,完成组件的渲染、事件绑定和数据回显等操作。
先安装包
npm i starfish-editor -S
注册包
import { createApp } from "vue";
import App from "./App.vue";
import StarfishEditor from "starfish-editor";
import "starfish-editor/src/styles/index.scss";
const app = createApp(App);
app.use(StarfishEditor);
app.mount("#app");
使用编辑器吗,对应字段参考下方
<starfish-editor class="starfish-editor"> </starfish-editor>
生成器使用
import { Dynamicform } from "starfish-form";
app.component(Dynamicform.name, Dynamicform);
动态表单组件使用
formResult可以为空,list 是通过编辑器生成的结果 json,搭配使用
<Dynamicform v-model:formResult="formResult" :allFormList="list" ></Dynamicform>
Star非常感谢留下星星的好心人,感谢您的支持 :heart:
Fork瞧,那些 小哥哥 、小姐姐 认真 学习 的样子真滴是 哎呦不错哦 :heart: