# avue-form

**Repository Path**: fly2world/avue-form

## Basic Information

- **Project Name**: avue-form
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master_nh
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2019-11-30
- **Last Updated**: 2021-01-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<<<<<<< HEAD
## 简介

本项目是一款基于 <a href="https://avuejs.com/" target="_blank">Avue</a> 的表单设计器，拖拽式操作让你快速构建一个表单。
[在线预览](http://112.74.43.150/)

## 依赖

element-ui 2.12.0+

```sh
$ npm i element-ui
```

@smallwei/avue 2.2.0+

```sh
$ npm i @smallwei/avue
```

或自行引入cdn

## 安装

### 组件

```sh
$ npm i avue-form-design
或
$ yarn add avue-form-design
```

### 源码

<a href="https://github.com/sscfaith/avue-form-design" target="_blank">github</a>

```sh
$ yarn
$ yarn serve
```

## 使用

```
import AvueFormDesign from 'avue-form-design'

Vue.use(AvueFormDesign)
```

```
<avue-form-design :options="options"
                  :aside-left-width="270"
                  :aside-right-width="380"
                  storage
                  @submit="handleSubmit"><avue-from-design>
```

### 属性

| 参数 | 说明 | 类型 | 默认值 |
| ------ | ------ | ------ | ------ |
| options | 字段配置 | Object | { column: [] } |
| storage | 开启本地存储功能，防止浏览器刷新丢失json | Boolean | false |
| asideLeftWidth | 左工具栏宽度 | String/Number | '270px' |
| asideRightWidth | 右工具栏宽度 | String/Number | '380px' |

### options字段配置

<a href="https://avuejs.com/doc/form/form-doc" target="_blank">表单设计文档</a>

| 属性 | 说明 | 类型 | 可选值 | 默认值 |
| ------| ------ | ------ | ------ | ------ |
| column | Avue字段 | Array | - | [] |
| labelPosition | 字段位置 |  String | 'left'/'center'/'right' | 'left' |
| labelWidth | 字段宽度 | Number | - | 120 |
| gutter | 字段间隔 | Number | - | 0 |
| menuBtn | 表单按钮 | Boolean | true/false | false |
| menuPosition | 表单按钮位置 | String | 'left'/'center'/'right' | 'center'
| submitBtn | 显示提交按钮 | Boolean | true/false | false |
| submitSize | 提交按钮大小 | String | 'medium'/'small'/'mini' | 'medium' |
| submitText | 提交按钮文本 | String | - | '提交' |
| emptyBtn | 显示清空按钮 | Boolean | true/false | false |
| emptySize | 清空按钮大小 | String | 'medium'/'small'/'mini' | 'medium' |
| emptyText | 清空按钮文本 | String | - | '清空' |

### 事件

| 名称 | 说明 | 回调参数 |
| ------ | ------ | ------ |
| submit | 生成json回调 | 当前配置的json |

### Avue插件

#### 富文本

```
import AvueUeditor from 'avue-plugin-ueditor'

Vue.use(AvueUeditor)
```

#### 坐标拾取器

```
import AvueMap from 'avue-plugin-map'

Vue.use(AvueMap)
```

## 打包

### 组件

```sh
$ yarn lib
```

### 源码

```sh
$ yarn build
```

## 捐赠
如果你觉得本项目帮助到你的话，可以给作者买杯咖啡。
<img src="http://112.74.43.150/images/donate.png">

## License

<a href="https://opensource.org/licenses/MIT" target="_blank">MIT</a>
=======
# avue-form

#### 介绍
{**以下是码云平台说明，您可以替换此简介**
码云是 OSCHINA 推出的基于 Git 的代码托管平台（同时支持 SVN）。专为开发者提供稳定、高效、安全的云端软件开发协作平台
无论是个人、团队、或是企业，都能够用码云实现代码托管、项目管理、协作开发。企业项目请看 [https://gitee.com/enterprises](https://gitee.com/enterprises)}

#### 软件架构
软件架构说明


#### 安装教程

1.  xxxx
2.  xxxx
3.  xxxx

#### 使用说明

1.  xxxx
2.  xxxx
3.  xxxx

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 码云特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  码云官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
5.  码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
>>>>>>> 21414a97037c3b5a4b76cc8ccc5b54c7a075d55f