CFilter 筛选组件

功能说明

该组件用于实现页面筛选功能，包含顶部筛选条和展开的更多筛选抽屉，支持多种筛选控件类型，包括选择器、日期范围、单选和输入框等。

引用方式

import { CFilter } from '@components/plugins/filter';

组件参数

• filterData (Object，默认值：{})：筛选数据对象
• bar (Object，默认值：{})：筛选横条项目配置
• type (String)：控件类型，可选值有 'select'、'dateRange'、'input'
• label (String)：显示的标签
• name (String)：字段名称
• cancelable (Boolean)：是否可取消选择，仅对select类型有效
• items (Array，默认值：[])：筛选展开层项目列表配置
• 每项格式同bar，但type可选值多一个'radio'
• selectOptions (Object，默认值：{})：各个项目的选项列表
• 格式为 { 字段名: [{label: '显示文本', value: '值'}] }
• onChange (Function，必填)：筛选变化时的回调函数
• 参数：filterData (Object) 变更后的筛选数据对象

实例方法

组件没有对外暴露的实例方法

使用示例

基础用法

<template>
  <view class="page">
    <CFilter
      :filterData="filterData"
      :bar="barConfig"
      :items="itemsConfig"
      :selectOptions="selectOptions"
      :onChange="handleFilterChange"
    />
    
    <!-- 列表内容 -->
    <view class="list">
      <!-- 根据筛选结果显示内容 -->
    </view>
  </view>
</template>

<script>
import { CFilter } from '@components/plugins/filter';

export default {
  components: {
    CFilter
  },
  data() {
    return {
      // 筛选数据
      filterData: {
        status: 1,
        memberType: '',
        dateRange: '',
        keyword: ''
      },
      // 顶部筛选条配置
      barConfig: {
        type: 'select',
        label: '状态',
        name: 'status',
        cancelable: false
      },
      // 更多筛选项配置
      itemsConfig: [
        {
          type: 'select',
          label: '会员类型',
          name: 'memberType'
        },
        {
          type: 'dateRange',
          label: '创建日期',
          name: 'dateRange'
        },
        {
          type: 'input',
          label: '关键字',
          name: 'keyword'
        }
      ],
      // 选项数据
      selectOptions: {
        status: [
          { label: '全部', value: '' },
          { label: '正常', value: 1 },
          { label: '停用', value: 0 }
        ],
        memberType: [
          { label: '全部', value: '' },
          { label: '普通会员', value: 'normal' },
          { label: 'VIP会员', value: 'vip' }
        ]
      }
    }
  },
  methods: {
    // 筛选变化回调
    handleFilterChange(filterData) {
      console.log('筛选条件变化:', filterData);
      // 根据筛选条件获取数据
      this.getListData(filterData);
    },
    
    // 获取列表数据
    getListData(params) {
      // 请求数据
    }
  }
}
</script>

注意事项

• 筛选条（bar）只能配置一个筛选项
• 抽屉式筛选（items）可以配置多个筛选项
• 每个筛选项的类型（type）必须与组件类型匹配
• select和radio类型的选项必须在selectOptions中配置对应的选项数据