vsearch-component

在 main.js 引入

import VSearchComponent from 'vsearch-component'
Vue.use(VSearchComponent)

#组件参数

| 序号 | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ------------ | -------------------------------------------- | ------- | ----------------------------------------- | ------ | | 1 | isCollapse | 是否实现收缩 | Boolean | true/false | false | | 2 | notNeedEmpty | 是否需要返回空值的参数 | Boolean | true/false | false | | 3 | searchList | 查询数组 | Array | 下一个列表说明 | -- | | 4 | searchParams | 返回的参数对象（可以使用 v-model 或者.sync） | Object | 对象的 key 和 searchList 里面的 prop 对应 | -- | | 5 | showCol | 一行展示多少列,最多 4 列 | Number | 1,2,3,4 | 4 |

#searchList 里面的参数（里面是每一个对象） | 序号 | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ------------ | -------------------------------------------- | ------- | ----------------------------------------- | ------ | | 1 | searchType | 查询对象类型 | String | input，date，select | -- | | 2 | id | 查询对象的 id | String | -- | -- | | 3 | label | 查询对象的 label | String | -- | -- | | 4 | prop | 查询对象的 prop （和 searchParams 的 key 对应，列如 searchParams{name:"jay"},prop:"name"）| String | -- |--| | 5 | clearable | 查询对象里面是否显示情况 icon | Boolean | true/false | 和 elementui 使用一样 | | 6 | value | 查询对象的 value | String | -- |--| | 7 | returnValue | 查询对象返回值的类型（可以返回单个值，可以返回当前的对象） | String | value/object | value | | 8 | placeholder | 查询对象的 placeholder | String | -- | -- | | 9 | func | 查询对象的方法（组件里面 searchType 为 input 时，是对应的 input 方法，searchType 为 select 或者 date 时，是对应的 change 方法） | function | -- | -- | | 10 | optionList | 查询对象 searchType 为 select 时，里面的可选项） | Array| -- | -- | | 11 | pickerOptions | 查询对象 searchType 为 date 时，控制时间选择） | function | -- | 和 elementui 使用一样 | | 12 | valueFormat | 查询对象 searchType 为 date 时，控制时间返回格式） | String | -- | 和 elementui 使用一样 | | 12 | valueFormat | 查询对象 searchType 为 date 时，控制时间返回格式） | String | -- | 和 elementui 使用一样 | | 13 | labelWidth | 查询对象的 label 的宽度 | String | -- | 80px | | 14 | slot | 查询对象的插槽通过 data 获取值 | String | -- | -- | | 15 | isShow | 查询对象的显示隐藏 | Boolean | true/false | true | | 16 | disabled | 查询对象的是否禁止操作 | Boolean | true/false | false |

#组件的插槽 slot | 序号 | 参数 | 说明 | | ---- | ------------ | -------------------------------------------- | | 1 | hanleBtn | 查询按钮（通过 data 获取里面返回的 searchList） |

#例子:不使用 slot

html

<VSearchComponent
      :searchList.sync="searchList"
      v-model="searchParams"
      :isCollapse="searchList.length > 4 ? true : false"
      notNeedEmpty
      :showCol="4"
    >
<template #hanleBtn="{ data }">

<div>
<el-button @click="search(data)">查询</el-button>
</div>
</template>
</VSearchComponent>

js

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

#例子:使用 slot

html

<VSearchComponent
      :searchList.sync="searchList"
      v-model="searchParams"
      :isCollapse="searchList.length > 4 ? true : false"
      notNeedEmpty
      :showCol="4"
    >
<template #inputSlot="{data}">
    <template v-if="item.searchType === 'input'">
        <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 #hanleBtn="{ data }">

<div>
<el-button @click="search(data)">查询</el-button>
</div>
</template>
</VSearchComponent>

js

data() {
    return {
        searchList: [{
          searchType: "input",
          id: 1,
          label: "姓名",
          prop: "name",
          clearable: true,
          value: "",
          placeholder: "请输入名字",
          slot:"inputSlot"
        }],
    }