gelem-form v1.1.0

更新日志

v0.1.4 更新说明

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

v0.1.3 更新说明

• 修复已知 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 事件防抖功能，属性字段说明如下：

示例代码：

<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: "el-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 字段说明如下：

比较策略控制器 controller 说明

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

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

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

新增防抖组件 g-debounce

属性说明：

代码示例：

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

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

g-form 组件描述说明

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

安装

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: "el-input",
          rules: [{ required: true, message: "请输入用户名" }]
        },
        {
          label: "密码：",
          labelWidth: "110px",
          prop: "password",
          element: "el-input",
          elementAttrs:{
            type:'password'
          },
          rules: [{ required: true, message: "请输入密码" }]
        }
      ]
    };
  }
};
</script>

组件属性

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

inputOptions.elementAttrs 属性

组件事件

组件方法

插槽 slot

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