更新记录

1.0.0（2026-04-08）

自定义插槽实现多级下拉菜单弹窗筛选功能

平台兼容性

uni-app(5.06)

其他

完整流程

1. 用户点击 筛选栏的"目录"按钮 → 触发 openCatalogPicker() 方法
2. 方法执行 catalogPicker.value.show() → 调用 uni-data-picker 组件的内置 show() 方法
3. 组件响应 弹出选择器弹窗，显示 catalogTreeData 树形数据
4. 用户选择 点击某个选项 → 触发 @change 事件 → 执行 onCatalogChange() 方法
5. 数据处理 在 onCatalogChange() 中更新 selectedCatalogValue.value 和 catalogPickerValue.value
6. 界面更新 筛选条件变化，computed 属性重新计算，列表自动刷新

<!-- 筛选栏 -->
<view class="filter-bar">
    <!-- 目录筛选 -->
    <view class="filter-item" @click="openCatalogPicker">
        <text class="filter-text" :class="{ active: selectedCatalogValue }">目录</text>
        <uni-icons :type="selectedCatalogValue ? 'up' : 'down'" size="14"
            :color="selectedCatalogValue ? '#6366f1' : '#333'" class="filter-icon" />
    </view>

    <!-- 类型筛选 -->
    <view class="filter-item" @click="openTypePicker">
        <text class="filter-text" :class="{ active: selectedType }">类型</text>
        <uni-icons :type="selectedType ? 'up' : 'down'" size="14"
            :color="selectedType ? '#6366f1' : '#333'" class="filter-icon" />
    </view>

    <!-- 状态筛选 -->
    <view class="filter-item" @click="openFeaturedPicker">
        <text class="filter-text" :class="{ active: selectedFeatured }">状态</text>
        <uni-icons :type="selectedFeatured ? 'up' : 'down'" size="14"
            :color="selectedFeatured ? '#6366f1' : '#333'" class="filter-icon" />
    </view>

    <!-- 排序筛选 -->
    <view class="filter-item" @click="openSortPicker">
        <text class="filter-text" :class="{ active: selectedSort }">排序</text>
        <uni-icons :type="selectedSort ? 'up' : 'down'" size="14"
            :color="selectedSort ? '#6366f1' : '#333'" class="filter-icon" />
    </view>

    <!-- 重置按钮 -->
    <view class="filter-item reset-item" @click="resetFilters">
        <text class="reset-text">重置</text>
    </view>
</view>

<!-- 目录选择器 -->
<uni-data-picker ref="catalogPicker" v-model="catalogPickerValue" :localdata="catalogTreeData"
    popup-title="选择目录" @change="onCatalogChange" :clear-icon="false" :multiple="false"
    class="picker-hidden-input">
</uni-data-picker>

<!-- 类型选择器 -->
<uni-data-picker ref="typePicker" v-model="typePickerValue" :localdata="typeList" popup-title="选择类型"
    @change="onTypeChange" :clear-icon="false" :multiple="false" class="picker-hidden-input">
</uni-data-picker>

<!-- 状态选择器 -->
<uni-data-picker ref="featuredPicker" v-model="featuredPickerValue" :localdata="featuredListData"
    popup-title="选择状态" @change="onFeaturedChange" :clear-icon="false" :multiple="false"
    class="picker-hidden-input">
</uni-data-picker>

<!-- 排序选择器 -->
<uni-data-picker ref="sortPicker" v-model="sortPickerValue" :localdata="sortListData" popup-title="排序方式"
    @change="onSortChange" :clear-icon="false" :multiple="false" class="picker-hidden-input">
</uni-data-picker>