czy-avue-form-design

Vue3.0版本，因Avue还存在一些bug，请慎重使用。
2,531 1,277
vue3 element-plus design form avue
Install
npm install czy-avue-form-design
Latest Version:1.0.131
Vue:3
License:MIT
Last Updated:Jul 6, 2023
Links: GitHub  ·  npm
Maintainer: ymchen

简介

Vue3.0版本，因Avue还存在一些bug，请慎重使用。

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

:tada: 基于Bladex的工作流插件已上市。授权地址
表单设计器预览地址
流程设计器预览地址
工作流插件预览地址

文档及demo项目

Wiki

依赖

element-plus

$ npm i element-plus

@smallwei/avue 3.0.0+

$ npm i @smallwei/avue@next

或自行引入cdn

安装

组件

$ npm i @sscfaith/avue-form-design@next
或
$ yarn add @sscfaith/avue-form-design@next

源码

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

Related Packages

otd-avue

Vue3.0 版本，因 Avue 还存在一些 bug，请慎重使用。

1,395
avue design element-plus form vue3
@sscfaith/avue-form-design

Vue3版本，因Avue还存在部分bug，请慎重使用。

4,475 1,277
avue design form element-ui vue
@ttkj/avue-form-design

基于@ttkj/avue的表单设计器

1,978
avue design form element-ui vue
pig-avue-form-design

Vue3版本，因Avue还存在部分bug，请慎重使用。

1,634 1,277
avue design form element-ui vue
avue-form-design

基于 vue2.x + avue2.x + elementUi实现的可视化表单设计器，使用了最新的前端技术栈...

1,266
avue design form element-ui vue

Version History

Version Released Vue License
1.0.131 ^3.2.31 MIT
1.0.130 ^3.2.31 MIT
1.0.129 ^3.2.31 MIT
1.0.128 ^3.2.31 MIT
1.0.127 ^3.2.31 MIT
Pre-releases (2)
Version Released Vue License
3.0.0-beta.3 ^3.2.31 MIT
1.0.77-packages ^3.2.31 MIT