【ant-design】生态介绍和表单设计器 汇总

最新推荐文章于 2024-04-03 09:48:00 发布
最新推荐文章于 2024-04-03 09:48:00 发布
阅读量2.9k 收藏 12
点赞数 1
分类专栏： # Javascript随笔 文章标签： vue.js javascript 前端 ant-design
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kinghzking/article/details/128325499
版权

▒ 目录 ▒

🛫 导读

需求

工作需要，用到了ant-design-vue，作为没接触过ant-design的小白，以新人角度来记录学习过程。

开发环境

版本号描述
文章日期2022-12-15
操作系统Ubuntu 20.04.4 LTSCSDN开发云
node -vv16.17.0npm -v （8.15.0）
Cloud IDE1.71.0

1️⃣ ant-design生态

ant-design主页可以简单看下其庞大的生态体系（相对于Element，资料丰富很多）。
在这里插入图片描述

ant-design

目前已经是5.0.7版本了。
助力设计开发者「更灵活」地搭建出「更美」的产品，让用户「快乐工作」～

  • 定制主题，随心所欲
    • Ant Design 5.0 开放更多样式算法，让你定制主题更简单
  • 组件丰富，选用自如
    • 大量实用组件满足你的需求，灵活定制与拓展
  • 设计语言与研发框架
    • 配套生态，让你快速搭建网站应用
      在这里插入图片描述

资料

ant-design-vue

这里是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。对标element-ui。
在这里插入图片描述
功能特点

  • 提炼自企业级中后台产品的交互语言和视觉风格。
  • 开箱即用的高质量 Vue 组件。
  • 共享Ant Design of React设计工具体系。

资料

ant-design-pro

开箱即用的中台前端/设计解决方案。对标vue-element-admin，资料更丰富。
在这里插入图片描述

资料

2️⃣ 表单设计器

懒是人类进步的动力，为了人类进步，我找几款表单设计器，进一步解放双手。
另一方面，可以比对正确的代码编写，快速入手ant-design组件。

form-render - 阿里团队开源表单设计器，自家 Antd UI 框架友好

FormRender 是阿里旗下的飞猪 app 的表单生成方案，从 2017 年在内部开始使用到 2019 年正式对外开源，FormRender 经历了多个阿里大项目的迭代和升级，细节已经相当全面。
在这里插入图片描述

功能特点

  • 支持阿里旗下的 Ant Design 和 Alibaba Fusion Design
  • 功能逻辑清晰，快速部署
  • 阿里旗下 20 多个业务线正在使用
  • 支持表格校验、自定义嵌套、样式，可拖拽生成表单

资料
git地址：https://github.com/xaboy/form-create
工具地址：https://xrender.fun/generator/playground
文档地址：https://xrender.fun/

form-create - 支持Vue3 及 ElementPlusUI、AntDesign、iview 框架

form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持 3 个UI框架，并且支持生成任何 Vue 组件。内置 20 种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。
在这里插入图片描述

form-create 功能特点

  • 全面支持 Vue 3
  • 支持市面上 3 种主流框架 ElementPlusUI、AntDesign、iview
  • 支持使用 json 数据生成表单
  • 支持生成任何组件，提升表单的灵活性，可以实现功能更复杂的表单
  • 内置组件缓存功能，提升渲染速度
  • 双向数据绑定，生成规则变化后，页面会实时更新

资料
git地址：https://github.com/xaboy/form-create
工具地址：http://form-create.com/designer/
文档地址： http://form-create.com/v2/ant-design-vue/

Form Generator Antdv

Ant Design Vue表单设计及代码生成器
在这里插入图片描述

资料
git地址：https://gitee.com/fuzui/form-generator-antdv
工具地址：http://form-create.com/designer/
文档地址： https://1x.antdv.com/docs/vue/introduce-cn/

k-form-design

基于vue和ant-design-vue实现的表单设计器，样式使用less作为开发语言，主要功能是能通过简单操作来生成配置表单，生成可保存的JSON数据，并能将JSON还原成表单，使表单开发更简单更快速

资料
github地址：https://github.com/Kchengz/k-form-design
gitee地址：https://gitee.com/kcz66/k-form-design
工具地址：http://cdn.kcz66.com/k-form-design.html
文档地址： http://kcz66.gitee.io/k-form-design

v-form-antd

v-form-antd是使用伪vue3开发的低代码可视化表格设计器，支持自定义组件、表单联动等高级功能。
在这里插入图片描述

资料
github地址：https://github.com/Alfred-Skyblue/v-form-antd
gitee地址：https://gitee.com/yuan_fangY/v-form-antd
工具地址：https://yuan_fangy.gitee.io/v-form-design/
文档地址： https://yuan_fangy.gitee.io/v-form-antd/

🛬 文章小结

前端技术千变万化，上面也只是资料的汇总，真的需要使用的也只是其中的一部分。
目前小编用到是ant-design-vue和Form Generator Antdv。Form Generator Antdv能生成组件代码，而其它几个表单设计器都是直接生成json的数据了，不适合初学者。

📖 参考资料

夜猫逐梦
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
FormDesigner基于AntDesign和jQueryUI的表单设计器
08-10
Form Designer 基于Ant Design 和 jQuery UI 的表单设计器
ant-design-colors:蚂蚁设计的调色板计算器
05-09
蚂蚁设计颜色 :artist_palette: 调色板计算器。 安装 $ npm install @ant-design/colors // or $ yarn add @ant-design/colors 用法 $ npm install @ant-design/colors --save import { red , volcano , gold , yellow , lime , green , cyan , blue , geekblue , purple , magenta , grey } from '@ant-design/colors' ; console . log ( blue ) ; // ['#E6F7FF', '#BAE7FF', '#91D5FF', ''#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#
探索Form Generator Antdv：自动化表单构建利器
gitblog_00091的博客
04-03 404
探索Form Generator Antdv：自动化表单构建利器 项目地址:https://gitcode.com/fuzui/form-generator-antdv Form Generator Antdv 是一个基于Ant Design Vue（Antdv）的动态表单生成器，它旨在简化前端开发者在构建可配置、可扩展的表单时的工作流程。此项目利用了最新的Web技术和最佳实践，为用户提供了一种高...
基于vue和ant-design-vue实现的表单设计器
05-21
基于vue和ant-design-vue实现的表单设计器，样式使用less作为开发语言，主要功能是能通过简单操作来生成配置表单，生成可保存的JSON数据，并能将JSON还原成表单，使表单开发更简单更快速
ant-design表单处理和常用方法及自定义验证操作
01-22
首先要说一下antdesign这个框架API和demo丰富，而且开发环境提供对应的warning来纠正用户的错误。是一个很好的组件库。 关于表单验证方面是依赖于 async-validator 库。百度的san-xui组件库的表单验证也是依赖与async-validator。说明这个库的实用性还是比较高，可以多了解一下。 首先按照antDesign官网Demo。我们可以copy一个Form表单的demo。 LoginForm是表单的组件，下面代码，是React 高阶组件（Hoc）。 用于使组件获取 this.props.form 下面介绍一些常用的 this.props.form的方法。
基于vue Ant-Design 的表单设计器.zip
12-26
vue
k-form-design:基于vue Ant-Design 的表单设计器，快速开发
05-10
表单设计器 k-form-design 简介 设计器布局参考form-generator项目，基于vue和ant-design-vue实现的表单设计器，样式使用less作为开发语言，主要功能是能通过简单操作来生成配置表单，生成可保存的JSON数据，并能将JSON还原成表单，使表单开发更简单更快速 注：该项目不兼容vue3.0项目，暂无后续兼容vue3.0的计划 特性 可视化配置页面 提供栅格、表格等布局 布局嵌套使用 提供预览、保存、生成json、生成可执行代码等操作 支持表单验证 快速获取表单数据 自定义组件插入 自定义主题色 组件 KFormDesign 表单设计器（基于可视化操作快速设计出表单页面，生成配置json或页面） KFormBuild 表单构建器（根据设计器中获取的配置json数据，快速构建出表单页面） 安装 # 使用yarn yarn add k-form-design
推荐6个开源可视化表单生成器
小马甲
01-30 3507
表单设计器和表单渲染器。表单设计器负责提供直观的可视化界面，让用户能够方便地搭建表单，并生成对应的JSON配置文件。表单渲染器则负责读取这些JSON配置，并将其转换成实际可用的表单界面。本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。
几款常用的表单设计器解决方案
草率小猿的博客
11-02 7379
在日常前端开发中，表单可以说是最常用的一种数据录入及展示组件。如果项目里有成百上千个表单需要手动编写代码，这将极大的一笔极大的人力开支。这时候，选择一款合适的表单设计器，就显得非常重要了，不仅能极大的缩短项目开发周期，而且还能保持各个页面之间风格基本统一。
antd form使用demo
zyxzp2012的博客
03-24 643
antd对表单进行了封装， 通过getFieldDecorator可实现表单数据双向绑定 使用步骤： 1、let { getFieldDecorator } = this.props.form; 2、对Form.Item进行了封装，getFieldDecorator(‘xx’,{rules:[],initialValue:’’})() <Form.Item {...props}> ...
多款顶级好用的 Vue 表单设计器测评推荐，可拖拽生成表单
热门推荐
蒋川@卡拉云
05-23 1万+
Vue 前端开发中，表单组件是排在前三的高频使用的组件，如何快速构建表单，节省力气，避免重复造轮子呢，选择一款适合自己的前端表单设计器就非常重要了。本文介绍 4 款顶级好用的 Vue 表单设计器，其中最后一款卡拉云，是新一代低代码开发工具，不仅能自动生成各类表单，还可以拖拽生成其他常见的前端组件，一行代码连接前后端数据，可快速接入数据库/api。它是表单设计器的超集，可直接生成属于你的后台管理工具，无敌好用。
vue_form_design:基于Vue3.0的表单设计器
03-16
vue_form_design:基于Vue3.0的表单设计器
基于vue Ant-Design 的表单设计器，快速开发.zip
最新发布
05-04
基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design ...
react-antd-通用表单生成器
weixin_43724569的博客
02-05 586
通用表单生成器，表单封装
表单设计器
qq_27009517的博客
11-08 722
form-generator: Element UI表单设计及代码生成器https://gitee.com/mrhj/form-generator 可视化表单设计器 - FormMaking基于Vue的可视化表单设计器，让表单开发简单而高效。http://form.making.link/sample/#/zh-CN/ https://github.com/GavinZhuLei/vue-form-makinghttps://github.com/GavinZhuLei/vue-form-making
基于Ant Design和jQuery UI的表单设计器
04-29 1664
基于Ant Design 和jQuery UI 的表单设计器 GitHub 地址 概念 Comonent 组件 Layout 布局，一种特殊的Component Component Editor 组件属性编辑器 Component Factory 组件工厂，创建Component 和 Co...
基于Ant Design 和 jQuery UI 的表单设计器
paozixiaopu的博客
04-24 3471
Form Designer 基于Ant Design 和 jQuery UI 的表单设计器 github 地址 概念 Comonent 组件 Layout 布局，一种特殊的Component Component Editor 组件属性编辑器 Component Factory 组件工厂，创建Component 和 Component Editor 扩展组件 创建一个组件 组件的定义是通过...
推荐几个好用的开源电子表单设计器
12-27 1698
Form.io是一个开源的纯JavaScript表单渲染器和API平台，为开发者提供了一种快速、灵活的方式来构建和管理表单驱动的应用程序。Form.io使用ES6和JavaScript实现(没有jQuery、Angular、React或任何其他框架依赖)将JSON模式渲染为webform表单，并将该表单挂接到Form.io服务的Complete Form Builder上，该Builder创建用于渲染表单的JSON模式。Form.io支持嵌套组件、布局、日期/时间、选择、输入。
基于vue的前端UI表单设计器
甜心的专栏
02-21 5414
在开发中，经常要做的就是各类表单的设计，如果不采用一些表单设计器，手写的话要很久，今天分享几个表单设计器。
ant-design-vueForm表单自定义校验规则
07-20
在 ant-design-vue 中，可以通过自定义校验规来进行表单的验。下面是一个简单的示例： 1. 首先，你需要在你的表单组件中引入 `Form` 和 `FormItem` 组件： ```vue <template> <a-form :form="form"> <a-form-item label="用户名" :colon="false" :validateStatus="getValidateStatus('username')" :help="getHelp('username')"> <a-input v-decorator="['username', { rules: [{ validator: validateUsername }] }]"></a-input> </a-form-item> <a-form-item> <a-button type="primary" @click="submit">提交</a-button> </a-form-item> </a-form> </template> <script> import { FormModel, Input, Button } from 'ant-design-vue'; export default { components: { 'a-form': FormModel, 'a-form-item': FormModel.Item, 'a-input': Input, 'a-button': Button, }, data() { return { form: this.$form.createForm(this), }; }, methods: { validateUsername(rule, value, callback) { // 自定义校验规则 if (value && value.length < 5) { callback(new Error('用户名长度不能小于5个字符')); } else { callback(); } }, getValidateStatus(name) { const { getFieldError, isFieldValidating } = this.form; if (isFieldValidating(name)) { return 'validating'; } else if (getFieldError(name)) { return 'error'; } else { return ''; } }, getHelp(name) { const { getFieldError } = this.form; return getFieldError(name) || ''; }, submit() { this.form.validateFields((err, values) => { if (!err) { console.log('校验通过', values); } }); }, }, }; </script> ``` 在上述示例中，我们定义了一个表单，其中的用户名字段使用了自定义的校验规则 `validateUsername`。在 `validateUsername` 方法中，我们可以自定义校验逻辑，并通过 `callback` 返回校验结果。当校验不通过时，`callback` 的参数为一个 `Error` 对象，可以指定错误信息。在 `a-form-item` 组件中，我们使用了 `:validateStatus` 和 `:help` 属性来显示校验状态和错误信息。 注意：在以上示例中，我们使用了 ant-design-vue 的 FormModel、Input 和 Button 组件，请确保已经正确引入这些组件。 这就是在 ant-design-vue 中使用自定义校验规则的方法，你可以根据自己的需求进行相应的定制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜猫逐梦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值