<p align="center">
<a href="http://www.form-create.com">
<img width="200" src="http://file.lotkk.com/form-create.png">
</a>
</p>
# form-create-designer
[![MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/xaboy/form-create-designer)
[![github](https://img.shields.io/badge/Author-xaboy-blue.svg)](https://github.com/xaboy)
**form-create-designer 是基于 [@form-create/element-ui](https://github.com/xaboy/form-create) 实现的表单设计器组件。可以通过拖拽的方式快速创建表单,提高开发者对表单的开发效率,节省开发者的时间。**
**[在线演示](http://form-create.com/designer?fr=github)**
> 如果对您有帮助,您可以点右上角 "Star" 支持一下 谢谢!本项目还在不断开发完善中,如有任何建议或问题[请在这里提出](https://github.com/xaboy/form-create-designer/issues/new)
> 本项目QQ讨论群[28963712](https://jq.qq.com/?_wv=1027&k=54aKUVw)
![demo1](http://form-create.com/img/designer-review.png)
## 安装
```shell
npm install @form-create/designer
```
## 引入
**CDN:**
```html
<!-- 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>
<!-- import form-create/designer -->
<script src="//unpkg.com/@form-create/designer/dist/index.min.js"></script>
```
**NodeJs:**
请自行导入`ElementUI`并挂载
```js
import formCreate from '@form-create/form-create'
import FcDesigner from '@form-create/designer'
Vue.use(formCreate)
Vue.use(FcDesigner)
```
## 使用
```html
<fc-designer ref="designer"/>
```
## 组件`props`
- **menu**`MenuList` 重新配置拖拽的组件
- **height**`int|string` 设计器组件高度, 默认`100%`
## 组件方法
- 获取当前生成表单的生成规则
```ts
type getRule = () => Rule[]
```
示例: `this.$refs.designer.getRule()`
- 获取当前表单的全局配置
```ts
type getOption = () => Object
```
- 设置当前生成表单的规则
```ts
type setRule = (rules: Rule[]) => void;
```
- 设置当前表单的全局配置
```ts
type setOption = (option: Object) => void;
```
- 增加一组拖拽组件
```ts
type addMenu = (menu: Menu) => void;
```
- 删除一组拖拽组件
```ts
type removeMenu = (name: string) => void;
```
- 批量覆盖插入拖拽组件
```ts
type setMenuItem = (name: string, items: MenuItem[]) => void;
```
- 插入一个拖拽组件到分组
```ts
type appendMenuItem = (name:string, item: MenuItem) => void;
```
- 删除一个拖拽组件
```ts
type removeMenuItem = (item: MenuItem) => void;
```
- 新增一个拖拽组件的生成规则
```ts
type addComponent = (item: DragRule) => void;
```
> **提示! 内置的三个组件分组`name`分别为: `main`,`aide`,`layout`**
## 捐赠
![donation.jpg](http://form-create.com/img/donation.jpg)
## 联系
##### email : xaboy2005@qq.com
## License
[MIT](http://opensource.org/licenses/MIT)
Copyright (c) 2021-present xaboy
没有合适的资源?快使用搜索试试~ 我知道了~
form-create-designer:好用的vue可视化表单设计器
共58个文件
js:42个
vue:5个
md:2个
需积分: 50 8 下载量 179 浏览量
2021-04-06
12:34:53
上传
评论
收藏 215KB ZIP 举报
温馨提示
表单创建设计师 形式创建设计师是基于实现的表单设计器组件。可以通过拖拽的方式快速创建表单,提高开发者对表单的开发效率,节省开发者的时间。 如果对您有帮助,您可以点右上角“ Star”支持一下谢谢!本项目还在不断开发完善中,如有任何建议或问题 本项目QQ讨论群 安装 npm install @form-create/designer ♡ CDN: <!-- 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 -
资源推荐
资源详情
资源评论
收起资源包目录
form-create-designer-master.zip (58个子文件)
form-create-designer-master
.gitignore 1024B
README.md 3KB
.github
PULL_REQUEST_TEMPLATE.md 1B
rollup.config.js 3KB
examples
main.js 389B
App.vue 8KB
index.html 167B
.cz-config.js 2KB
LICENSE 1KB
package.json 3KB
src
components
FcDesigner.vue 27KB
Struct.vue 3KB
DragTool.vue 3KB
DragBox.vue 581B
index.js 902B
config
rule
tab.js 991B
editor.js 448B
slider.js 1KB
button.js 2KB
alert.js 1KB
col.js 707B
input.js 2KB
number.js 1KB
radio.js 1KB
upload.js 2KB
row.js 1KB
transfer.js 2KB
rate.js 1KB
span.js 679B
time.js 2KB
divider.js 988B
tree.js 4KB
checkbox.js 1KB
color.js 875B
switch.js 1KB
index.js 1KB
date.js 3KB
cascader.js 7KB
select.js 2KB
tabPane.js 726B
space.js 855B
menu.js 1KB
base
validate.js 1KB
field.js 2KB
form.js 1KB
style
index.css 2KB
fonts
fc-icons.woff 5KB
build
output.js 1KB
utils
isExternal.js 650B
getBanner.js 893B
common.var.js 309B
plugins
form-create-rollup-reslove-plugins
node-resolve.js 1KB
types
index.d.ts 448B
.eslintignore 52B
babel.config.js 411B
.eslintrc.js 852B
vue.config.js 375B
package-lock.json 815KB
共 58 条
- 1
资源评论
华笠医生
- 粉丝: 33
- 资源: 4679
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功