reda-form-design

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

1,198 1,277

Install
`npm install reda-form-design`
Latest Version:	1.1.4 (Oct 13, 2020)
License:	MIT
Last Updated:	Jul 6, 2023
Links:	GitHub · npm

Maintainer: wdmcwx

简介

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

依赖

$ cnpm install

源码

github

$ yarn
$ yarn serve

html

详见examples

使用

cnpm install reda-form-design --save-dev

main.js 中：

import formDesign from 'reda-form-design/packages'
Vue.use(formDesign)

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

<avue-form-design style="height: 100vh;"
  :options="options3"
  @submit="handleSubmit3"
  storage
  show-avue-doc
  :custom-fields="customFields3"></avue-form-design>


data: () {
  return {
    customFields3: [
      {
        title: '分割线',
        component: 'el-divider',//ele分割线
        span: 24,
        icon: 'el-icon-eleme',
        tips: '看我：自定义属性怎么用？',
        params: {
          html: '<h3 style="color:red">分割线标题</h3>',
          contentPosition: "left",
        }
      },
      {
        title: '警告',
        component: 'el-alert',
        labelWidth: '0',
        span: 24,
        icon: 'el-icon-warning',
        tips: '看我：自定义事件怎么用？',
        params: {
          title: '警告警告警告警告',
          type: 'success'
        },
        event: {
          close: () => {
            console.log('alert关闭事件')
          }
        }
      },
    ],
    options3: {
      column: [
        {
          type: 'url',
          prop: 'url',
          label: '超链接',
          icon: 'icon-url',
          value: 'http://www.baidu.com',
          span: 24,
          display: true
        },
        {
          prop: 'img',
          type: 'img',
          label: '图片',
          span: '24',
          display: true
        }
      ]
    }
  }
}

methods: {
  handleSubmit3(val) {
    this.$message.success("查看控制台")
    console.log(val);
  }
}

属性

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

options字段配置

Avue文档

属性	说明	类型	可选值	默认值
column	Avue字段	Array	-	[]
labelPosition	字段位置	String	'left'/'center'/'right'	'left'
labelWidth	字段宽度	Number	-	120
gutter	字段间隔	Number	-	0
menuBtn	表单按钮	Boolean	true/false	false
submitBtn	显示提交按钮	Boolean	true/false	false
submitText	提交按钮文本	String	-	'提交'
emptyBtn	显示清空按钮	Boolean	true/false	false
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

Avue插件

富文本

import AvueUeditor from 'avue-plugin-ueditor'

Vue.use(AvueUeditor)

打包

组件

$ yarn lib

源码

$ yarn build

License

MIT