vcommon-components

里面暂时有四个基于 element ui 的四个组件表单 VFormComponent，模态框 VDialogWarpper，列表 VTable，列表 VTableSlot

在 main.js 引入

import VCommonComponents from 'vcommon-components'
Vue.use(VCommonComponents)

VFormComponent 组件参数

| 序号 | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ------------ | -------------------------------------------- | ------- | ------------------------------------------- | ------ | | 1 | isCollapse | 是否实现收缩 | Boolean | true/false | false | | 2 | notNeedEmpty | 是否需要返回空值的参数 | Boolean | true/false | false | | 3 | formItemList | formItemList 数组（可以使用.sync） | Array | 下一个列表说明 | -- | | 4 | formParams | 返回的参数对象（可以使用 v-model 或者.sync） | Object | 对象的 key 和 formItemList 里面的 prop 对应 | -- | | 5 | labelWidth | 表单的 labelWidth | String | "80px",... | "80px" | | 6 | formBtnStyle | 操作按钮(父元素的样式) | Object | {"text-align":"left"} | -- | | 7 | btnList | 操作按钮数组 （可以使用.sync） | Array | 下一个列表说明 | -- | | 8 | formRef | 获取组件里面表单的 ref 组使用.sync | Object | -- | null | | 9 | disabled | 整个表单是否禁止操作 | Boolean | true/false | false |

#formItemList 里面的参数（里面是每一个对象） | 序号 | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ------------ | -------------------------------------------- | ------- | ----------------------------------------- | ------ | | 1 | formItemType | formItem 对象类型 | String | input，select, other ，date(element ui 里面的日期的 type 类型里面字段,也可以使用),dateCompose| -- | | 2 | id | formItem 对象的 id | String/Number | -- | -- | | 3 | label | formItem 对象的 label | String | -- | -- | | 4 | prop | formItem 对象的 prop （和 formParams 的 key 对应，列如 formParams{name:"jay"},prop:"name"）| String | -- |--| | 5 | clearable | formItem 对象里面是否显示删除 icon | Boolean | true/false | 默认显示 | | 6 | value | formItem 对象的 value | String | -- |--| | 7 | returnValue | formItem 对象返回值的类型（可以返回单个值，可以返回当前的对象） | String | value/object | value | | 8 | placeholder | formItem 对象的 placeholder，没有值时，根据表单类型，显示使用 label 的值作为提示 | String | -- | -- | | 9 | func(或者使用 elementui 的方法) | formItem 对象的方法（组件里面 formItemType 为 input 时，是对应的 input 方法，formItemType 为 select 或者日期类型 时，是对应的 change 方法），根据 returnValue 返回当前整个对象或者值 | function | -- | -- | | 10 | optionList | formItem 对象 formItemType 为 select 时，里面的可选项） | Array| -- | -- | | 11 | pickerOptions | formItem 对象 formItemType 为 日期类型 时，控制时间选择） | function | -- | 和 elementui 使用一样 | | 12 | valueFormat | formItem 对象 formItemType 为 日期类型 时，控制时间返回格式） | String | yyyyMMdd | 和 elementui 使用一样 | | 13 | labelWidth | formItem 对象的 label 的宽度 | String | -- | 80px | | 14 | slot | formItem 对象的插槽通过 data 获取值 | String | -- | -- | | 15 | isShow | formItem 对象的显示隐藏 | Boolean | true/false | true | | 16 | disabled | formItem 对象的是否禁止操作 | Boolean | true/false | false | | 17 | frameStyle | formItem 对象的输入框样式 | Object | { width: '100%' } | {} | | 18 | interger |输入框样式是否输入整数 | Boolean | true/false | false | | 19 | dataType | formItem 对象返回类型 | String | "String","Boolean"，"Oject"，"Array",可以不填，暂时四种 | -- | | 20 | rules | formItem 面里校验规则 | Array | -- | 和 elementui 使用一样 | | 21 | composList | formItem 面里可以多个输入框或者选择框等，配合 slot 插槽使用 | String | 里面对象属性 prop 和 value 必须有，其他属性需要时，重写 | -- | | 22 | formItemStyle | formItem 面里样式 | Object | -- | -- | | 23 | optionDefaultProp | formItemType = 'select'时,可以修改 option 里面 label 和 value 的属性名字 | Object | -- | {label: 'text',value: 'key'} 文本使用 text 字段，value 使用 key 字段| | 24 | noplaceholder | 为 true 时，不显示 placeholder | Boolean | true/false | false | | 25 | limitOptions | formItemType 为 date/datetime/dateCompose 时生效，pickerOptions 有值时失效 | Object | {limitStart：'',limitEnd:'',disabledBefore:'',disabledAfter:'',disabledToday:''},下面说明| -- |

#limitOptions 里面的参数 | 序号 | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ------------ | -------------------------------------------- | ------- | ----------------------------------------- | ------ | | 1 | limitStart |限制开始日期，上面的 formItem 的 prop| String | -- | -- | | 2 | limitEnd | 限制结束日期，上面的 formItem 的 prop | String | -- | -- | | 3 | disabledBefore | 限制是否可以选择以前的日期（不包括今天）| Boolean | true/false | false | | 4 | disabledAfter | 限制是否可以选择以后的日期（不包括今天）| Boolean | true/false | false | | 5 | disabledToday | 限制是否可以选择今天| Boolean | true/false | false |

#btnList 里面的参数（里面是每一个对象） | 序号 | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ------------ | -------------------------------------------- | ------- | ----------------------------------------- | ------ | | 1 | id | 操作按钮对象的 id | String/Number | -- | -- | | 2 | label | 操作按钮对象的 label | String | -- | -- | | 3 | func | 操作按钮对象的方法,返回所有条件的值| function | -- | -- | | 4 | slot | 操作按钮对象的插槽通过 data 获取值 | String | -- | -- | | 5 | isShow | 操作按钮对象的显示隐藏 | Boolean | true/false | true | | 6 | btnStyle | 操作按钮的样式 | Object | {"text-align":"left"} | -- | | 7 | 其他属性参照 element ui 的按钮 | -- | -- | -- | -- |

#按钮使用的插槽时 | 序号 | 参数 | 说明 | | ---- | ------------ | -------------------------------------------- | | 1 | 插槽的名字(handleBtn) | form 按钮插槽 id（通过 data 获取里面返回的 formItemList） |

#组件的方法（通过组件的 ref 调用） | 序号 | 参数 | 说明 | | ---- | ------------ | -------------------------------------------- | | 1 | clear | 表单条件清空 | 需要调用原生方法，ref=“VFormComponent” | | 2 | validateSubmit | 校验方法 | 需要调用原生方法，ref=“VFormComponent” ，用法和 element ui 一样| | 3 | clearValidate | 清除校验 | 需要调用原生方法，ref=“VFormComponent” ，用法和 element ui 一样| | 4 | resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | 需要调用原生方法，ref=“VFormComponent” ，用法和 element ui 一样| | 5 | validateField | 对部分表单字段进行校验的方法 | 需要调用原生方法，ref=“VFormComponent” ，用法和 element ui 一样|

#例子:不使用 slot

html

<VFormComponent
      :formItemList.sync="formItemList"
      :btnList="btnList"
      v-model="formParams"
      :isCollapse="formItemList.length > 4 ? true : false"
      notNeedEmpty
      labelWidth="100px"
      ref="VFormComponent"
    >
</VFormComponent>

js

data() {
    return {
        formItemList: [{
          formItemType: "date",
          id: 4,
          label: "时间选择",
          prop: "date",
          value: "",
          returnValue: "object",
          valueFormat: "yyyyMMdd",
          frameStyle: {
            width: '250px'
          },
          pickerOptions: {
            disabledDate(time) {
              return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
            },
          },
          func: (val) => {
            console.log(val);
          },
        }],

        btnList: [
          {
            id: 1,
            label: '查询',
            func: (val) => {
              this.search2(val)
            }
          },
          {
            id: 2,
            label: '重置',
            func: (val) => {
              this.$refs.VFormComponent.clear()
            }
          }
        ],
    }

#例子:按钮和表单使用 slot

html

<VFormComponent
      :formItemList.sync="formItemList"
      v-model="formParams"
      :isCollapse="formItemList.length > 4 ? true : false"
      notNeedEmpty
      labelWidth="100px"
    >
<template #inputSlot="{data}">
    <el-form-item
        :label="data.label"
        :label-width="data.labelWidth">
            <el-input
            v-model="data.value"
            :maxlength="data.maxlength"
            :clearable="data.clearable"
            :placeholder="data.placeholder"
            ></el-input>
    </el-form-item>
</template>
<template #switchSlot="{ data }">
  <el-form-item :label="data.label" :label-width="data.labelWidth">
    <el-switch
      v-model="data.value"
      active-color="#13ce66"
      inactive-color="#ff4949"
    >
    </el-switch>
  </el-form-item>
</template>
<template #handleBtn="{ data }">
  <el-button @click="search(data)">查询</el-button>
</template>
</VFormComponent>

js

data() {
    return {
        formItemList: [{
          formItemType: "input",
          frameStyle: {
            width: '250px'
          },
          id: 1,
          label: "姓名",
          prop: "name",
          clearable: true,
          value: "",
          placeholder: "请输入名字",
          slot:"inputSlot"
        },
        {
          formItemType: 'other',
          id: 7,
          label: '开关',
          prop: 'open',
          value: false,
          slot: 'switchSlot'
        }
        ],
        btnList: [{
          type:'primary',
          func:()=>{
            ...
          }
          slot:"handleBtn"
        },
        ],
    }

#例子:使用 slot 和 composList

html

<VFormComponent
  :formItemList.sync="formItemList"
  v-model="formParams"
  :isCollapse="isCollapse"
  notNeedEmpty
  labelWidth="100px"
  :btnList.sync="btnList"
  ref="VFormComponent"
>
  <template #inputSlot="{ data }">
    <el-form-item :label="data.label" :label-width="data.labelWidth">
      <div style="display: flex">
        <el-input
          v-model="data.composList[0].value"
          :style="data.composList[0].frameStyle"
        ></el-input>
        <div style="margin: 0 15px">至</div>
        <el-input
          v-model="data.composList[1].value"
          :style="data.composList[1].frameStyle"
        ></el-input>
      </div>
    </el-form-item>
  </template>
</VFormComponent>

js

data() {
    return {
      formItemList: [
        {
          formItemType: 'other',
          id: 1,
          label: '姓名',
          slot: 'inputSlot',
          composList: [
            {
              prop: 'name1',
              value: '',
              placeholder: '请输入名字',
              frameStyle: {
                width: '250px'
              }
            },
            {
              prop: 'name2',
              value: '',
              placeholder: '请输入名字',
              frameStyle: {
                width: '250px'
              }
            }
          ]
        }
      ],
    }
}

模态框 VDialogWarpper 组件参数

| 序号 | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ------------------ | ---------------------------------- | ------- | ------------- | ------ | | 1 | drag | 是否拖拽 | Boolean | true/false | false | | 2 | center | 是否对头部和底部采用居中布局 | Boolean | true/false | false | | 3 | closeOnClickModal | 是否可以通过点击 modal 关闭 Dialog | Boolean | true/false | false | | 4 | closeOnPressEscape | 是否可以通过按下 ESC 关闭 Dialog | Boolean | true/false | false | | 5 | visible | Dialog 显示或者隐藏 | Boolean | true/false | false | | 7 | showClose | Dialog 是否显示关闭 icon | Boolean | true/false | true | | 8 | destroyOnClose | 关闭时销毁 Dialog 中的元素 | Boolean | true/false | true | | 9 | destroyOnClose | Dialog 是否需要遮罩层 | Boolean | true/false | true | | 10 | title | Dialog 标题 | String | -- | -- | | 11 | width | Dialog 宽度 | String | "300px","30%" | "30%" |

#组件的 methods | 序号 | 方法 | 说明 | | ---- | ------------ | -------------------------------------------- | | 1 | close | Dialog 关闭 |

#例子:

<VDialogWarpper
          slotFooter
          :visible.sync="visible"
          :title="colShowTitle"
          v-bind="$attrs"
        >

<div style="margin-bottom: 20px">
<el-checkbox-group v-model="checkboxList">
<el-checkbox
                :label="item.value"
                v-for="item in showColumnList"
                :key="item.value"
                >{{ item.label }}</el-checkbox
              >
</el-checkbox-group>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="mini" type="text" @click="columnClose()" >取消</el-button
            >
<el-button type="primary" size="mini" @click="setColumn()" >确定</el-button
            >
</span>
</VDialogWarpper>

列表 VTableCompose 组件参数（todo）

省略提示框 VEllipsisTooltip 组件参数（todo）