组件分享之前端组件——用于自定义表单的前端组件form-create
组件分享之前端组件——用于自定义表单的前端组件form-create
cn華少
发布于 2022-05-16 08:41:58
发布于 2022-05-16 08:41:58
组件分享之前端组件——用于自定义表单的前端组件form-create
背景
近期正在探索前端、后端、系统端各类常用组件与工具，对其一些常见的组件进行再次整理一下，形成标准化组件专题，后续该专题将包含各类语言中的一些常用组件。欢迎大家进行持续关注。
组件基本信息
- 组件：form-create
- 开源协议：MIT license
- 官网：www.form-create.com/v2/
内容
本次分享一款用于自定义表单的前端组件form-create，它可以通过JSON生成动态呈现、数据收集、验证和提交功能。支持3个UI框架，并支持生成任何Vue组件。内置20种常用表单组件和自定义组件，无论多么复杂的表单都可以轻松处理。
安装
根据自己使用的 UI 安装对应的版本
iview
npm install @form-create/iviewview-design
npm install @form-create/iview4element-ui
npm install @form-create/element-uiant-design-vue
npm install @form-create/ant-design-vue引入
iview
<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
<!-- import iView -->
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<!-- import form-create/iview -->
<script src="//unpkg.com/@form-create/iview/dist/form-create.min.js"></script>element-ui
<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import element -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import form-create/element -->
<script src="//unpkg.com/@form-create/element-ui/dist/form-create.min.js"></script>ant-design-vue
<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link href="https://unpkg.com/ant-design-vue@1.5.3/dist/antd.min.css" rel="stylesheet">
<!-- import moment -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/zh-cn.js"></script>
<!-- import ant-design-vue -->
<script defer src="https://unpkg.com/ant-design-vue@1.5.3/dist/antd.js"></script>
<!-- import form-create -->
<script src="//unpkg.com/@form-create/ant-design-vue/dist/form-create.min.js"></script>NodeJs:
iview
import formCreate from '@form-create/iview'
Vue.use(formCreate)element-ui
import formCreate from '@form-create/element-ui'
Vue.use(formCreate)ant-design-vue
import formCreate from '@form-create/ant-design-vue'
Vue.use(formCreate)
image.png
更多内容可以参考其官方的REAMDE
本文声明：
本作品由 cn華少 采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-05-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
