高级搜索组件使用文档

本文档将详细介绍如何使用高级搜索组件，该组件支持多种输入类型，包括 input, select, date, time, 和 cascader。

安装

首先，确保你已经安装了必要的依赖包。你可以使用 npm 或 yarn 来安装：

npm install td-advanced-search
或者
yarn add td-advanced-search

基本用法

在你的项目中引入高级搜索组件：

import TdAdvancedSearch from 'td-advanced-search';

以下是一个完整的示例，展示了如何在Vue使用高级搜索组件：

<template>
  <div id="app">
    <td-advanced-search :fields="searchFields" @search="handleSearch"></td-advanced-search>
  </div>
</template>

<script>
import TdAdvancedSearch from 'td-advanced-search';
export default {
  name: 'App',
  components: {
    TdAdvancedSearch
  },
  data() {
    return {
      searchFields: [
        {
          label: '姓名',
          name: 'name',
          type: 'input',
          placeholder: '请输入姓名',
        },
        {
          label: '性别',
          name: 'gender',
          type: 'select',
          placeholder: '请选择性别',
          options: [
            { label: '男', value: 'male' },
            { label: '女', value: 'female' },
          ],
        },
        {
          label: '出生日期',
          name: 'birthDate',
          type: 'date',
          placeholder: '请选择出生日期',
        },
        {
          label: '出生时间',
          name: 'birthTime',
          type: 'time',
          placeholder: '请选择出生时间',
        },
        {
          label: '注册时间',
          name: 'registerTime',
          type: 'datetime',
          placeholder: '请选择注册时间',
        },
        {
          label: '地区',
          name: 'region',
          type: 'cascader',
          placeholder: '请选择地区',
          options: [
            {
              value: 'beijing',
              label: '北京',
              children: [
                { value: 'chaoyang', label: '朝阳区' },
                { value: 'haidian', label: '海淀区' },
              ],
            },
            {
              value: 'shanghai',
              label: '上海',
              children: [
                { value: 'pudong', label: '浦东新区' },
                { value: 'xuhui', label: '徐汇区' },
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleSearch(form) {
      console.log('搜索条件:', form);
      // 在这里处理搜索逻辑
    },
  },
}
</script>

属性说明

fields fields 是一个数组，用于定义搜索组件中的各个字段。每个字段对象可以包含以下属性：

type (必填): 字段类型，支持 input, select, date, time, cascader。

label (必填): 字段的标签文本。

name (必填): 字段的名称，用于标识字段。

options (可选): 当 type 为 select 或 cascader 时，用于定义选项列表。

onSearch onSearch 是一个函数，当用户点击搜索按钮时触发。该函数接收一个参数 values，包含所有字段的值。

结论

高级搜索组件提供了一个灵活且易于使用的方式来创建复杂的搜索表单。通过配置 fields 属性，你可以轻松地添加各种类型的输入字段，并通过 onSearch 回调函数处理搜索逻辑。希望这篇文档能帮助你快速上手并使用该组件。