基于element的轻量查询组件（学习封装）

前言

组件是前端vue基于element的组件，十分轻量，只包含输入、选择、时间日期选择与多选框，默认form是同一行的，设置为inline，按钮可以有多个

一、使用步骤

1.局部引入

①将组件放入components中

②使用import局部引入

③components声明

2.读入数据

该组件可以传三个变量，分别是form，size，searchFormList，其中form与searchFormList是必须的

<search-form :form="form" :size="size" :searchFormList="searchFormList"></search-form>

form与searchFormList是必须的

所有事件都包含change事件，通过数组进行传导，id作为唯一标识，label为标签文本，value为form内的键值，class为选择不同组件的判定条件

searchFormList大致数据样式：

searchFormList: [
        {id:0,label:'姓名',value:'name',prop:'name',class:'input'},
        {id:1,label:'年龄',value:'age',prop:'age',class:'input'},
        {id:2,label:'性别',value:'sex',prop:'sex',class:'select'},
        {id:3,label:'地址',value:'address',prop:'address',class:'input'},
        {id:4,label:'生日',value:'birthday',prop:'birthday',class:'dateSelect', type:'datetime'},
      ],

form直接就写成form:{}吧，不占地方，而且因为是搜索框组件，没有必填校验

input--输入框

class	判断类型，input
value	绑定参数名称
pIcon	Input输入框前图标
sIcon	Input后输入框图标
max	最大输入长度
min	最小输入长度
clear	是否可以清空
disabled	是否禁用
plac	无值时显示内容
inputChange	Change事件（传val输入值与item组件值）
inputInput	Input事件（同上）

select--选择框

class	判断类型，select
value	绑定参数名称
clear	是否可以清空
disabled	是否禁用
plac	无值时显示内容
options	选择数组，label绑定label,value绑定value，在mounted里绑定，或options值变化时改变，watch监听
selectChange	Change事件（传val输入值与item组件值）

time-picker--单时间

class	判断类型，timeSelect
value	绑定参数名称
clear	是否可以清空
disabled	是否禁用
plac	无值时显示内容
isRange	是否为时间范围，true和false。是为数组[HH:mm:ss,HH:mm:ss]，不是为字符串HH:mm:ss，
selectTimeChange	Change事件（传val输入值与item组件值）

date-picker--时间日期

class	判断类型，dateSelect
value	绑定参数名称（单个为字符串yyyy-MM-dd或yyyy-MM-dd HH:mm:ss;范围为数组，[yyyy-MM-dd,yyyy-MM-dd]或[yyyy-MM-dd HH:mm:ss,yyyy-MM-dd HH:mm:ss]）
clear	是否可以清空
disabled	是否禁用
plac	无值时显示内容
type	选择日期类型，四种：date，datetime，daterange，datetimerange（日期，日期+时间，日期范围，日期时间范围）
selectDateChange	Change事件（传val输入值与item组件值）

checkbox--复选框

class	判断类型，checkbox
value	绑定参数名称
disabled	是否禁用
border	是否有边框
checkboxChange	Change事件（传val输入值与item组件值）

button--按钮

class	判断类型，button
type	Element原生type
icon	按钮图标
btnClick	点击事件（传val输入值与item组件值）
name	按钮名称

3.代码

单个vue文件

html：

<template>
  <div>
    <el-form :inline="true" :model="formCopy" :size="sizeCopy">
      <el-form-item v-for="item in searchFormListCopy" :key="item.id" :label="item.label">
        <el-input
          v-if="item.class == 'input'"
          v-model="formCopy[item.value]"
          :prefix-icon="item.pIcon"
          :suffix-icon="item.sIcon"
          :maxlength="item.max"
          :minlength="item.min"
          show-word-limit
          :clearable="item.clear"
          :disabled="item.disabled"
          :placeholder="item.plac||'请输入'+item.label"
          @change="(val)=>{
            item.inputChange&&item.inputChange(val,item)
          }"
          @input="(val)=>{
            item.inputInput&&item.inputInput(val,item)
          }">
        </el-input>
        <el-select
          v-if="item.class == 'select'"
          :clearable="item.clear"
          v-model="formCopy[item.value]"
          :disabled="item.disabled"
          :placeholder="item.plac||'请选择'+item.label"
          @change="(val)=>{
            item.selectChange&&item.selectChange(val,item)
          }">
          <el-option
            v-for="item2 in item.options"
            :key="item2.value"
            :label="item2.label"
            :value="item2.value">
          </el-option>
        </el-select>
        <el-time-picker
          v-if="item.class == 'timeSelect'"
          :is-range="item.isRange"
          v-model="formCopy[item.value]"
          :disabled="item.disabled"
          value-format="HH:mm:ss"
          :clearable="item.clear"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :placeholder="item.plac||'请选择'+item.label"
          @change="(val)=>{
            item.selectTimeChange&&item.selectTimeChange(val,item)
          }">
        </el-time-picker>
        <el-date-picker
          v-if="item.class == 'dateSelect'"
          v-model="formCopy[item.value]"
          :type="item.type"
          :value-format="item.type == 'datetime'?'yyyy-MM-dd HH:mm:ss':'yyyy-MM-dd'"
          :disabled="item.disabled"
          :clearable="item.clear"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :placeholder="item.plac||'请选择'+item.label"
          @change="(val)=>{
            item.selectDateChange&&item.selectDateChange(val,item)
          }">
        </el-date-picker>
        <el-checkbox
          v-if="item.class == 'checkbox'"
          v-model="formCopy[item.value]"
          :disabled="item.disabled"
          :border="item.border"
          @change="(val)=>{
            item.checkboxChange&&item.checkboxChange(val,item)
          }">{{item.name}}</el-checkbox>
        <el-button
          v-if="item.class == 'button'"
          :type="item.type"
          @click="btnClick(item,formCopy)"
          :icon="item.icon">{{item.name}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

js：

<script>
export default {
  props: {
    form: {
      type: Object,
      default: function() {
        return {}
      }
    },
    size: {
      type: String,
      default: 'mini'
    },
    searchFormList: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      formCopy: {},
      sizeCopy: 'mini',
      searchFormListCopy: []
    }
  },
  watch: {
    form: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        this.formObjCopy = newVal
      }
    },
    size: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        this.sizeCopy = newVal
      }
    },
    searchFormList: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        this.searchFormListCopy = newVal
      }
    }
  },
  methods: {
    btnClick(data, form) {
      data.event && this.$parent[data.event](data, form)
    }
  }
}
</script>

---

总结

第一次学习封装，自己跑还行，没太多bug，逻辑可能有问题，不能灵活适应某些要求。看看后续能不能优化，希望各位大佬提出意见。