# Search 搜索

Search 搜索组件是一个使用`list`来配置生成的搜索表单

## 基础用法

配置项list中通过type可以配置任意组件，不受框架限制

:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，支持通过`rules`配置校验规则

```html
<template>
  <eagle-search :list="searchList" @search="handleSearch" @reset="handleReset" :span="8" :searching="searching"></eagle-search>
</template>

<script>
export default {
  data() {
    return {
      searching: false,
      searchList: [
        { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
        { type: 'eagle-select', key: 'type', label: '类型', props: { dataSource: [{ label: '呆萌', value: '1' }, { label: '二货', value: '2' }] } },
        { type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '邮政编码', placement: "left" } },
        { type: 'el-input', key: 'number', label: '楼栋号' },
        { type: 'el-input', key: 'not', label: '我不是', visible: (model) => model.type === '2' },
        { type: 'el-input', key: 'no', label: '我没有', visible: (model) => model.type === '2' },
        { type: 'el-input', key: 'never', label: '别瞎说啊', visible: (model) => model.type === '2' },
      ]
    }
  },
  mounted() {
    this.searching = true;
    setTimeout(() => {
      this.searching = false;
    }, 3000);
  },
  methods: {
    handleSearch(value) {
      console.log(value);
    },
    handleReset() {
      console.log('reset');
    }
  }
}
</script>
```

:::

## 自定义组件

在使用`list`的同时，也支持通过`slot`传入组件，以满足不同的业务需求

:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，支持通过`rules`配置校验规则

```html
<template>
  <eagle-search :list="searchList">
    <template #type="{ model }">
      <eagle-select v-model="model.type" :dataSource="dataSource"></eagle-select>
    </template>
    <template #button-group="{ model, collapse, doSearch, doReset, doCollapse }">
      <el-button size="mini" type="primary" round @click="handleQuery(model, doSearch)">搜索</el-button>
      <el-button size="mini" type="success" round @click="doReset">恢复</el-button>
      <el-button size="mini" type="info" round @click="doCollapse">{{ collapse ? '打开' : '关闭' }}</el-button>
    </template>
  </eagle-search>
</template>

<script>
export default {
  data() {
    return {
      searchList: [
        { type: 'el-input', key: 'name', label: '名称' },
        { key: 'type', label: '类型' },
        { type: 'el-input', key: 'yes', label: '是的' },
        { type: 'el-input', key: 'yeah', label: '没错' },
        { type: 'el-input', key: 'absolutely', label: '就这样' },
      ],
      dataSource: [
        { label: '选项A', value: 'A' },
        { label: '选项B', value: 'B' },
      ]
    }
  },
  methods: {
    handleQuery(model, action) {
      if (action) {
        action();
        console.log(model);
      }
    },
  }
}
</script>
```

:::

## Attribute 属性

参数|说明|类型|可选值|默认值
-|-|-|-|-
value / v-model |	绑定值 | Object | - | -
list | 表单项配置列表 | Array | - | []

## Events 事件

事件名称|说明|回调参数
-|-|-
change | 表单model发生变化时触发 | model对象
search | 点击查询按钮时触发 | model对象
reset | 点击重置按钮时触发 | -

## List 表单项配置列表

参数|说明|类型|可选值|默认值
-|-|-|-|-
type | 组件类型 | String | - | el-input
key | 参数名 | String | - | -
label | 参数标签 | String | - | -
props | 组件参数 | Object,Function(model: object)) | - | {}
style | 组件样式 | Object | - | { width: "100%" }
on | 组件事件 | Object,Function(model: object) | - | {}
visible | 组件v-if状态 | Boolean,Function(model: object) | - | true
rules | 组件校验规则 | Object,Array | - | -
tip | 组件提示框 | Object,String | - | {}