更新日志

v1.2.0 更新说明

• 修改 g-form 组件，新增对 rate 和 switch 组件的支持;修改labelWidth的默认值为auto

v1.1.1 更新说明

• inputOptions.elementAttrs.element 参数值修改，去掉el-前缀
• 其他修改

v1.1.0 更新说明

• 压缩组件代码量
• g-form 组件支持清除校验规则
• g-form 组件支持对部分表单字段进行校验的方法

v1.0.0 更新说明

• 修复已知 bug
• g-form 组件支持传入 rule。

v0.1.3-beta 更新说明

• 修复组件注册的 bug
• 支持按需引入
• 按需引入使用方式
• import {gFrom,gDebounce,gInput} from 'gelem-form'

v0.1.2 更新说明

• 1、g-form 组件支持更多 elementUI 的 form 组件的属性
• 2、g-form 组件新增 change 事件防抖功能
• 3、g-form 新增字段关联控制显示隐藏
• 4、新增防抖组件 g-debounce

g-form 组件新增属性

g-form 组件支持更多 elemntUI form 组件属性；包含 labelPosition labelWidth inliineMessage statusIcon disabled 具体用法请看ElementUI 官网 form 组件；

g-form 组件新增 change 事件防抖功能，属性字段说明如下：

| 属性 | 值类型 | 默认值 | | ------------ | ------- | ------ | | debounced | boolean | false | | debounceTime | number | 300 |

示例代码：

<template>
  <div id="app">
    <span>debounce表单测试</span>
    <g-form
      @change="onFormChange"
      debounced
      :debounce-time="1200"
      inline
      :formOptions="debouncedFormOptions"
    />
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      debouncedFormOptions: [
        {
          label: "debounce表单：",
          labelWidth: "110px",
          prop: "debounce",
          element: "input"
        },
      ],
    };
  },
  methods: {
    onFormChange(prop, data) {
      console.log(prop, data);
    },

  },
};
</script>

除了通过在 g-form 传递 debounced 、 debounceTime 对表单统一做事件防抖以外、还可以通过 formOptions 属性给该属性每一项添加字段 debounced 、 debounceTime 从而控制单个子表单元素事件防抖。在 formOptions 添加防抖优先级高于 g-form 组件上的防抖。 示例代码：

省略若干代码.....
<g-form
  @change="onFormChange2"
  inline
  :formOptions="debouncedFormOptions2"
/>
methods: {
  onFormChange2(prop, data) {
    console.log(prop, data);
  },
}

新增字段关联控制显示隐藏

通过给 g-form 的数组类型的属性 inputOptions 中的每一项添加一个对象类型的 fieldControls 字段，来控制关联的字段显示和隐藏。 inputOptions.fieldControls 字段说明如下：

| 属性 | 属性值 | 属性描述 | | ---------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | fields | 关联的表单字段 | 需要关联控制的其他表单字段，以逗号隔开 | | valueCompareWith | 比较参考值 | 需要参与比较的值 | | controller | 比较策略控制器 | 支持两种方式，字符串或者一个函数。如果单个字符串的话，将使用组件内置的比较函数，支持字符串有：eq(等于)，no_eq(不等于)，gt(大于)，gte(大于等于)，lt(小于)，lte(小于等于)，range(大于等于并且小于等于)，in(数组包含某个值)，not_in(数组不包含某个值)，like(字符串包含某个值)，not_like(字符串不包含)，like_all(一个数组包含另一个数组的所有值), in_arr(两数组有交集)，empty（是否为空），not_empty（是否不为空） |

比较策略控制器 controller 说明

1、如果 fieldControls.controller 的值为字符串，使用的内置比较函数的第一个参数就是某个表单字段的值，第二个参数则是 fieldControls.valueCompareWith 的值。

2、如果 fieldControls.controller 是一个比较函数，则表单字段的值为函数的第一个实参，fieldControls.valueCompareWith 的值为第二个实参。

3、controller 无论是字符串还是函数，只有比较结果为 true 的时候，才会显示 fieldControls.fields 定义的字段对应的表单。

新增防抖组件 g-debounce

属性说明：

| 属性 | 值类型 | 默认值 | 说明 | | ------------- | ------- | ------ | ----------------------------------- | | events | 字符串 | 无 | 多个事件用逗号隔开，eg:input, click | | debounce-time | number | 300 | 无 | | immediate | boolean | false | 无 |

代码示例：

省略若干代码....
<g-debounce events="input" :debounce-time="800">
  <input @input="oninput"  />
</g-debounce>

methods:{
  oninput() {
    console.log('input 事件被debounce了');
  },
}

g-form 组件描述说明

基于 Vue element-ui 的表单组件, 支持的组件有 input 、 select 、 date-picker 、 time-picker 、 cascader 、 radio-group 、 checkbox-group，rate,switch 。

安装

npm install gelem-form -S

在 vue 中如何使用

//main.js
import gForm from 'gelem-form'
Vue.use(gForm)

//vue组件或者页面中
<template>
  <div id="app">
    <g-form
      size='mini'
      inline
      :formOptions='resignFormOptions'
    />
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      resignFormOptions: [
        {
          label: "用户名：",
          labelWidth: "110px",
          prop: "username",
          element: "input",
          rules: [{ required: true, message: "请输入用户名" }]
        },
        {
          label: "密码：",
          labelWidth: "110px",
          prop: "password",
          element: "input",
          elementAttrs:{
            type:'password'
          },
          rules: [{ required: true, message: "请输入密码" }]
        }
      ]
    };
  }
};
</script>

组件属性

inline 同 elementUI form 表单组件的 inline 属性； size 同 elementUI form 表单组件 size 属性； inputOptions 是一个数组，数组每一项是如下结构的对象：

| 属性 | 值类型 | 默认值 | | ------------ | ------------------------------------------------------------------------------------------------------- | ------ | | label | string | null | | labelWidth | string | null | | prop | string | null | | element | input, select, input-number, time-picker, date-picker, cascader, radio-group, radio-btn, checkbox-group | null | | rules | array 参考 elementUI 表单组件 form-item 组件的 rules 属性 | [] | | elementAttrs | form 表单内的 child 属性，详细见 elementAtttrs 属性 | {} | | initialValue | 除 function 类型以外的其他类型 | null | | actionBtn | array, 只可包含 submit、reset | 无 |

inputOptions.elementAttrs 属性

| 属性 | 值类型 | 默认值 | 描述 | | --------- | ------------------------------------ | ------ | ------------------------------------------------------------------------------------------ | | optConfig | {labelKey: String, valueKey: String} | 无 | 对于 elementUI 中的 select, radio-group, checkbox-group 等组件 otpion key value 的配置 | | options | ObjectArray | 无 | 对象数组, 用于 select, radio-group, checkbox-group 等组件 otpion 显示 | | 其他 | 其他 | 无 | 其他本组件可以支持的 elementUI 表单组件拥有的属性 |

组件事件

| 事件名 | 回调参数 | 描述 | | ------ | ---------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | | finish | 根据 inputOptions 每一项的 prop 属性，生成的对象, eg: function(formData){} | 点击确认提交按钮触发，如使用了默认插槽或者 actionBtn 属性不合规时，finish 事件将会失效 | | change | 返回发生变化的表单的 key 值，以及所有字段的值，eg: function(prop, data){} | 无 |

组件方法

| 方法名 | 参数 | 返回值 | 描述 | | ------------- | --------------- | ------------------------------------------------ | ------------------------------------------------------------ | | getData | 无 | 根据 inputOptions 每一项的 prop 属性，生成的对象 | 无 | | setData | Object | 无 | 传入的对象的 key 与 inputOptions 每一项 prop 值相同才会更改 | | validate | function | 无 | 参数 function 是一个回调函数，回调函数的实参就是校验的结果值 | | onReset | 无 | 无 | 清空表单以及表单校验的错误 | | validateField | fields,callback | 无 | 校验指定字段 | | clearValidate | fields | 无 | 清除指定字段的校验 |

组件属性

插槽 slot

本组件只提供默认的插槽，当使用默认插槽之后组件，此时 actionBtn 属性传入得值将会无效