# search 面板的使用
<div class="demo-block">
<w-search v-on:search="handleClose" :formData="formData"></w-search>
<script>
export default {
    data() {
      return {
        formData:[
          {
            type:"input",
            model:"inp1",
            placeholder:"请输入活动名称",
            label:"活动名称",
            size:"medium",
            width:"180",
            disable:false,
            clearable:true,
          },
          {
            type:"select",
            model:"inp2",
            label:"活动名称",
            placeholder:"请选择",
            disable:false,
            clearable:true,
            width:"180",
            size:"medium",
            options:[{
              value: '选项1',
              label: '黄金糕'
            }, {
              value: '选项2',
              label: '双皮奶'
            }],
          },
          {
            type:"daterange",
            label:"活动时间",
            model:"inp3",
            placeholder:"请选择",
            disable:false,
            clearable:true,
            width:"280",
            size:"medium",
            startPlaceholder:"开始时间",
            endPlaceholder:"结束时间",
            rangeeparator:"至"
          },
          {
            type:"button",
            typeStatus:"primary",
            text:"搜索",
            disable:false,
            clearable:true,
            size:"medium",
          },
          {
            type:"button",
            typeStatus:"primary",
            text:"重置",
            disable:false,
            clearable:true,
            size:"medium",
          }
        ]
      };
    },
    methods: {
      handleClose(tag) {
        console.log(tag)
      }
    }
  }
</script>
</div>


::: demo
```html

<w-search v-on:search="handleClose" :formData="formData"></w-search>
<script>
export default {
    data() {
      return {
        formData:[
          {
            type:"input",
            model:"inp1",
            placeholder:"请输入活动名称",
            label:"活动名称",
            size:"medium",
            width:"180",
            disable:false,
            clearable:true,
          },
          {
            type:"select",
            model:"inp2",
            label:"活动名称",
            placeholder:"请选择",
            disable:false,
            clearable:true,
            width:"180",
            size:"medium",
            options:[{
              value: '选项1',
              label: '黄金糕'
            }, {
              value: '选项2',
              label: '双皮奶'
            }],
          },
          {
            type:"daterange",
            label:"活动时间",
            model:"inp3",
            placeholder:"请选择",
            disable:false,
            clearable:true,
            width:"280",
            size:"medium",
            startPlaceholder:"开始时间",
            endPlaceholder:"结束时间",
            rangeeparator:"至"
          },
          {
            type:"button",
            typeStatus:"primary",
            text:"搜索",
            disable:false,
            clearable:true,
            size:"medium",
          },
          {
            type:"button",
            typeStatus:"primary",
            text:"重置",
            disable:false,
            clearable:true,
            size:"medium",
          }
        ]
      };
    },
    methods: {
      handleClose(tag) {
        console.log(tag)
      }
    }
  }
</script>

```
:::


## API

| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  | -------- |
| type | 搜索模块的dom节点类型 | string | — | input button |
| model | 绑定vue dom 树的变量 | string

## Click 事件

| 事件名称      | 说明          | 返回值  |
|---------- |-------------- |---------- |
| search | 点击搜索触发的事件 |  搜索的参数对象 |
| resetForm | 点击重置触发的事件 |  ----------------- |