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	表单条件清空
2	validateSubmit	校验方法
3	clearValidate	清除校验
4	resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
5	validateField	对部分表单字段进行校验的方法

#例子:不使用 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）