爷爷页面

<template>    
<search
      style="z-index: 9999"
      :options="options"
      placeholder="请选择时间，或输入名称、单选、多个勾选、模糊查询"
      @search="onSearch"
    ></search>
</template>
<script lang="ts" setup>
const options = reactive([
  {
    label: '名称',
    field: 'name',
    type: 'input',
  },
  {
    label: '提交时间',
    field: 'time',
    type: 'times',
  },

  {
    label: '单选',
    field: 'select',
    type: 'select',
    items: [
      { label: '杨幂', value: '1' },
      { label: '杨颖', value: '2' },
    ],
  },

  {
    label: '模糊搜索',
    field: 'vague',
    type: 'vague',
    remoteMethod(Text: any, selectOptions: any, callback: any) {
      user({ keyWord: Text, pageNum: 1, pageSize: 100 }).then((data: any) => {
        const list = data.records.map((item: any) => {
          return {
            label: item.name,
            value: item.value,
            extra: item.key,
          }
        })
        callback(list)
      })
    },
  },
  {
    label: '勾选搜索',
    field: 'check',
    type: 'check',
    remoteMethod(Text: any, selectOptions: any, callback: any) {
      user({ keyWord: Text, pageNum: 1, pageSize: 100 }).then((data: any) => {
        const list = data.records.map((item: any) => {
          return {
            label: item.name,
            value: item.value,
            extra: item.key,
          }
        })
        callback(list)
      })
    },
  },
])
const onSearch = (data: any) =>{做处理掉接口}

</script >

引用组件