更新记录

3.0.0（2025-10-14） 下载此版本

升级支持vue3； 使用css实现icon； 支持自定义内容插槽；

2.0.0（2020-09-28） 下载此版本

支持待筛选项滑动； 支持微信小程序；

1.0.0（2020-07-15） 下载此版本

插件初始化

平台兼容性

ren-dropdown-filter

简介

一款下拉筛选菜单，目前只在uni-app项目中使用，其他平台适配兼容未知，如有帮助到你不胜荣幸，欢迎Star！

插件市场地址

调用示例

<template>
    <view>
        <ren-dropdown-filter ref='renDropdownFilterRef' :filterData='filterData' :defaultIndex='defaultIndex'
        @onSelected='ed'>
        <template #other>
            <view class="filters">
                <view>自定义筛选条件:</view>
                <view class="items"><view class="item" @click="onConfirm(index)" v-for="(_,index) in 6" :key='index.toString()'>选项{{index}}</view></view>
            </view>
        </template>
        </ren-dropdown-filter>
        <view class='result'>筛选数据：</view>
        <view>{{result}}</view>
    </view>
</template>

<script setup lang="ts">
    import {ref} from 'vue'
    import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue'
    const filterData = ref([
                    [{ text: '全部状态', value: '' }, { text: '状态1', value: 1 }, { text: '状态2', value: 2 }, { text: '状态3', value: 3 }, { text: '状态4', value: 4 }, { text: '状态5', value: 5 }, { text: '状态6', value: 6 },, { text: '状态7', value: 7 }],
                    [{ text: '全部类型', value: '' }, { text: '类型1', value: 1 }, { text: '类型2', value: 2 }, { text: '类型3', value: 3 }],
                    [{ text: '其他条件', slotName: 'other' }]
                ])
                const defaultIndex = ref([0,0,0])
                const renDropdownFilterRef = ref()
                const result = ref([])
                const ed = (res)=>{
                result.value.splice(0,2,...res)
            }
            const onConfirm = (val)=>{
                result.value[2]={text:'其他条件',value:val}
                renDropdownFilterRef.value.closeMask()
            }
</script>

属性说明

事件说明

预览