基于element-ui开发的动态表单设计组件

基于element-ui开发的动态表单设计组件

介绍一款基于element-ui 2.x开发的动态表单设计器组件，以及表单查看组件。点击预览

github地址：https://github.com/xlkai/yz-dync-form 点击跳转

效果图：

丰富特性

1. 基于element-ui 2.x；
   
2. 内含丰富表单组件；
   
3. 可以实现自定义新增或删除表单组件；
   
4. 可以自定义实现部分组件的数据来源操作
   

支持组件

表单设计器，包含以下组件：

• 输入型组件：单行文本、多行文本、密码框、计数器
• 选择型组件：下拉单选、下拉多选、单选框组、多选框组、时间选择、时间范围、日期选择、日期范围、开关
• 布局型组件：行容器

安装

npm install element-ui -S
npm install vuedraggable -S
npm install yz-dync-form -S

快速开始

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

import YzDyncForm from 'yz-dync-form'
import 'yz-dync-form/lib/styles/index.css'
// or 
import 'yz-dync-form/packages/styles/src/index.scss'

Vue.use(Element)
Vue.use(YzDyncForm)

// or
import {
   
  FormDesign,
  FormView,
  FormDialogView
  // ...
} from 'yz-dync-form'

Vue.use(FormDesign)
Vue.use(FormView)
Vue.use(FormDialogView)

组件 - 表单设计器

内含丰富组件

<template>
  <yz-form-design
    :height="domHeight"
    :clone="clone"
    @submit="onSubmit"/>
</template>

<script>
export default {
  data() {
    return {