reda-form-design v1.1.4

简介

本项目是一款基于 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字段配置

Avue文档

事件

Avue插件

富文本

import AvueUeditor from 'avue-plugin-ueditor'

Vue.use(AvueUeditor)

打包

组件

$ yarn lib

源码

$ yarn build

License

MIT