1 Star 0 Fork 0

Kenny小狼 / yz-dync-form

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
Clone or download
README.md 6.17 KB
Copy Edit Web IDE Raw Blame History

yz-dync-form

基于element-ui 2.x开发的动态表单设计器组件,以及表单查看组件。点击查看

丰富特性

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

内含组件

表单设计器,包含以下组件:

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

Install

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

Quick Start

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"
    :data="formData"
    :custom-button="customButton"
    @submit="onSubmit"/>
</template>

<script>
export default {
  data() {
    return {
      domHeight: 600, //表单设计器整体高度

      formData: {
        form: {
          labelPosition: 'right',
          size: 'small'
        }, //表单配置属性
        rows: [{
          field: {
            type: 'text',
            prop: 'field0',
            label: '单行文本',
            required: true,
            _config: {
              type: 'text',
              clearable: true,
              placeholder: '请输入'
            }
          }
        }] //组件
      },

      //自定义按钮,Object为传单个按钮,Array为传多个按钮
      customButton: [{
        name: '关闭',
        type: 'danger',
        index: 0,
        onClick() {
          console.log('------close-----')
        }
      }
      }]
    }
  },
  methods: {
    clone(form) {
      // 表单配置自定义格式化
      return form
    },
    onSubmit(form) {
      console.log(form)
      //表单提交按钮点击事件
    }
  }
}
</script>

表单查看

<template>
  <div>
    <!-- 普通表单查看 -->
    <yz-form-view :data="form" :rules="rules" />

    <!-- 自带Dialog表单查看 -->
    <yz-form-dialog-view :data="form" :rules="rules" v-bind="dialogProp">
      <template slot="title">
        <!-- dialog标题slot -->
      </template>

      <template slot="footer">
        <!-- dialog底部slot -->
      </template>
    </yz-form-dialog-view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rules: {
        //表单校验规则
      },
      form: {
        rows: [],
        //...
        //el-form配置属性
      },
      dialogProp: {
        //支持el-dialog所有配置属性
      }
    }
  }
}
</script>

自定义操作

自定义实现组件注册、部分组件的数据源注册、组件自定义渲染等

import { configStore, config } from 'yz-dync-form/lib/core.js'

/**
 * 注册组件类别
 */
const groupIndex = 0 //参数可选,若定义则表示新增的组件类别所排序的位置
configStore.registerGroup({
  name: '组别名称',
  type: '组别编号(唯一)'
}, groupIndex)


/**
 * 注册组件 
 */
const groupType = '' //组别编号,可选值:input, select, layout, 自定义的组别编号
const component = {
  type: '组件唯一标识',
  icon: '组件图标class名称',
  name: '组件名称',
  tag: '渲染组件的标签,可以是字符串类型,也可以是一个函数,函数参数为组件默认属性,例如:e-input',
  default() { //组件默认属性
    return {}
  },
  render(h, field, model) {
    // 组件渲染函数。可选,不传则使用默认渲染函数,但是不传时,tag参数必填
    // 例子
    return h('el-input', {
      attrs: field[config.fieldConfigName],
      model: model
    })
  },
  renderChildren(h, field) {
    // 渲染子组件。可选,如果组件下有子组件,则必传,比如el-select下有el-option
    // 例子
    return (<el-option />)
  }
}
const sortable = true //是否重新排序,默认true,设置排序条件,可在组件中新增getOrder()方法,返回值越小排序越前
configStore.registerComponent(groupType, component, sortable)


/**
 * 注册组件render
 */
configStore.registerRender('组件唯一标识', (h, field, model) => {
  // 例子
  return h('el-input', {
    attrs: field[config.fieldConfigName],
    model: model
  })
})


/**
 * 注册组件属性配置页面
 */
import TextProp from 'yz-dync-form/packages/design/src/props/text'
configStore.registerPropertyComponent('组件唯一标识', TextProp) 

自定义数据源

部分组件,包含子组件,例如下拉选择框,需要配置下拉选项。组件里面已经包含手动新增选项功能,如果想要从网络接口获取数据作为下拉选项,则可以用到以下功能

import { configStore, DataSource } from 'yz-dync-form/lib/core.js'

// 例子
import Custom from 'yz-dync-form/packages/design/src/datasource/custom'

class CustomDataSource extends DataSource {
  constructor() {
    super('数据源唯一标识', '数据源名称')
  }

  getPage() {
    //数据源配置页面
    return Custom
  }

  getData(config) {
    // config为数据源配置页面返回的配置项
    // ps: 返回结果咱不支持异步操作,需同步返回结果,后续再更新
    return {
      nameKey: 'label', 
      valueKey: 'value',
      datas: config //结果
    }
  }
}

const index = -1 //数据源的位置,系统默认注册了一个数据源
configStore.registerDataSource(new CustomDataSource(), index)

Browser Support

Modern browsers and Internet Explorer 10+.

Changelog

Detailed changes for each release are documented in the release notes.

Comment ( 0 )

Sign in for post a comment

1
https://gitee.com/kennylee/yz-dync-form.git
git@gitee.com:kennylee/yz-dync-form.git
kennylee
yz-dync-form
yz-dync-form
master

Search

102255 3a0e046c 1850385 102255 7aaa926c 1850385