From 3b03f87a02458f719e2eb4bf112a13441b427d14 Mon Sep 17 00:00:00 2001
From: ‘chensiAb’ <‘chenchenco03@163.com’>
Date: Tue, 25 Mar 2025 13:54:34 +0800
Subject: [PATCH] Merge branch 'master' of ssh://dev.zhiheiot.com:29418/mob-components
---
_cursor.ai/plugins.doc/filter.doc/CFilter.doc.md | 132 ++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 132 insertions(+), 0 deletions(-)
diff --git a/_cursor.ai/plugins.doc/filter.doc/CFilter.doc.md b/_cursor.ai/plugins.doc/filter.doc/CFilter.doc.md
new file mode 100644
index 0000000..f2c67ad
--- /dev/null
+++ b/_cursor.ai/plugins.doc/filter.doc/CFilter.doc.md
@@ -0,0 +1,132 @@
+# CFilter 筛选组件
+
+## 功能说明
+
+该组件用于实现页面筛选功能，包含顶部筛选条和展开的更多筛选抽屉，支持多种筛选控件类型，包括选择器、日期范围、单选和输入框等。
+
+## 引用方式
+
+```js
+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) 变更后的筛选数据对象
+
+## 实例方法
+
+组件没有对外暴露的实例方法
+
+## 使用示例
+
+### 基础用法
+
+```html
+<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中配置对应的选项数据
\ No newline at end of file
--
Gitblit v1.9.1