ByFoldSearch 折叠搜索组件

简单的展开/收起按钮组件，通常与 ByPageSearch 组件配合使用。

基础用法

<template>
  <div>
    <by-fold-search @change="handleFoldChange" />
  </div>
</template>

<script>
export default {
  methods: {
    handleFoldChange(isExpanded) {
      console.log('展开状态:', isExpanded)
      // 根据展开状态控制其他组件的显示
    }
  }
}
</script>

与 ByPageSearch 组件配合使用

<template>
  <by-page-search
    v-model="searchQuery"
    :search-form-config="searchConfig"
    @submit="handleSearch"
    @reset="handleReset"
  />
</template>

<script>
export default {
  data() {
    return {
      searchQuery: {},
      searchConfig: {
        flexible: {
          foldField: ['email', 'createTime'], // 需要折叠的字段
          unfold: false // 默认是否展开
        },
        isFlexible: true, // 启用展开收起功能
        formItems: [
          {
            field: 'keyword',
            type: 'input',
            label: '关键字'
          },
          {
            field: 'email',
            type: 'input',
            label: '邮箱'
          },
          {
            field: 'createTime',
            type: 'datepicker',
            label: '创建时间'
          }
        ]
      }
    }
  },
  methods: {
    handleSearch(formData) {
      console.log('搜索参数:', formData)
    },
    handleReset() {
      console.log('重置搜索')
    }
  }
}
</script>

API

Events

事件名	说明	参数
change	展开/收起状态改变时触发	(isExpanded)

注意事项

1. 本组件主要用于配合 ByPageSearch 组件使用
2. 在 ByPageSearch 中需要配置 flexible.foldField 来指定需要折叠的字段
3. 需要设置 isFlexible: true 来启用展开收起功能