添加一个新组件

1. 在 packages/fieldsConfig.js 中添加新组件的配置参数json

2. 在 packages/config/ 中新建组件配置参数文件

   注：vue 文件的命名，需要和步骤 1 参数中的 type 属性值一致

3. 在 packages/config/index.js 中注册全局组件

发布

1. 在 package.json 中，修改新发布的版本号

2. 打包

   npm run lib

3. 登录Nexus

    npm login

4. 发布

   npm publish

简介

本项目是一款基于 Avue 的表单设计器，拖拽式操作让你快速构建一个表单。 在线预览

更新日志

更新日志

文档及 demo 项目

Wiki

依赖

element-ui 2.13.2+

$ npm i element-ui

@smallwei/avue 2.6.16+

$ npm i @smallwei/avue

或自行引入 cdn

安装

组件

$ npm i avue-form-customized
或
$ yarn add avue-form-customized

源码

github or gitee

$ yarn
$ yarn serve

html

详见 examples

使用

import AvueFormDesign from '@sscfaith/avue-form-design'

Vue.use(AvueFormDesign)

<avue-form-design style="height: 86vh;"
                  :options="options"
                  storage
                  @submit="handleSubmit"></avue-form-design>

属性

| 参数 | 说明 | 类型 | 默认值 | | ------------------------------------- | ----------------------------------------- | ------------- | -------------------------------------------------------------------------------------------- | | options | 字段配置 | Object/String | { column: [] } | | storage | 开启本地存储功能，防止浏览器刷新丢失 json | Boolean | false | | asideLeftWidth | 左工具栏宽度 | String/Number | '270px' | | asideRightWidth | 右工具栏宽度 | String/Number | '380px' | | showAvueDoc（已废弃，请使用 toolbar） | 是否显示 Avue 文档 | Boolean | false | | showGithubStar | 是否显示 GitHub Star | Boolean | true | | toolbar | 顶部工具栏 | Array | ['avue-doc', 'import', 'generate', 'preview', 'clear'] | | undoRedo | 是否开启撤销重做功能 | Boolean | true | | includeFields | 左侧展示字段 | Array | fieldsConfig.js 中配置的字段 | | customFields | 自定义组件 | Array | 使用方法 |

options 字段配置

Avue 文档

| 属性 | 说明 | 类型 | 可选值 | 默认值 | | ------------- | ------------ | ------- | ----------------------- | ------ | | column | Avue 字段 | Array | - | [] | | labelPosition | 字段位置 | String | 'left'/'center'/'right' | - | | labelWidth | 字段宽度 | Number | - | - | | gutter | 字段间隔 | Number | - | 0 | | menuBtn | 表单按钮 | Boolean | true/false | true | | submitBtn | 显示提交按钮 | Boolean | true/false | true | | submitText | 提交按钮文本 | String | - | '提交' | | emptyBtn | 显示清空按钮 | Boolean | true/false | true | | emptyText | 清空按钮文本 | String | - | '清空' | | tabs | 多分组转标签 | Boolean | true/false | false | | detail | 详情模式 | Boolean | true/false | false | | readonly | 全局只读 | Boolean | true/false | false | | disabled | 全局禁用 | Boolean | true/false | false |

事件

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

方法

| 名称 | 说明 | 参数 | 返回 | | ------- | --------------------- | --------------------- | ------- | | getData | 获取当前编辑器的 JSON | type: 'string'/'json' | Promise |

插槽

| 名称 | 说明 | | ------------ | ------------------ | | toolbar | 顶部工具栏右侧插槽 | | toolbar-left | 顶部工具栏左侧插槽 |

Avue 插件

富文本

import AvueUeditor from 'avue-plugin-ueditor'

Vue.use(AvueUeditor)

打包

组件

$ yarn lib

源码

$ yarn build

捐赠

如果你觉得本项目帮助到你的话，可以给作者买杯咖啡。

License

MIT