uni-app 弹出下拉条件筛选菜单组件sl-filter

简介

一款使用简单的筛选组件，适配app、微信小程序、H5。

dcloud插件市场地址：sl-filter
github demo地址：SongLazy/sl-filter

下拉菜单使用了 popup 弹出层组件
作者：[email protected]
感谢分享

效果图

并列菜单

并列菜单

独立菜单

独立菜单

使用方式

在script中引用组件

    import slFilter from '@/components/sl-filter/sl-filter.vue';
    export default {
        components: {
            slFilter
        }
    }

属性说明

Props

属性名	类型	默认值	说明
menuList	Array		数组元素的个数为菜单item个数
independence	Boolean	false	是否为独立菜单，不设置该字段默认为并列菜单
titleColor	String	#666666	menuBar菜单标题颜色
themeColor	String	#000000	按钮选中颜色和确认按钮颜色
@result	function		选中条件的回调。参数为回调的条件对象

independence

默认为false，并列菜单

值	说明
true	独立菜单。筛选菜单每个子菜单选择完毕点击确定回传当前菜单结果
false	并列菜单：筛选菜单各个子菜单选择完毕点击确定后回传所有结果

数据源

menuList

属性名	类型	默认值	说明
title	String		一级筛选菜单名称
detailTitle	String		子标题，可作为说明。可不设置此字段
isMutiple	Boolean	false	是否多选。为true时，可选择多个条件；为false时，只能单选。
isSort	Boolean		为true时，为单选排序筛选方式。不填写此字段为默认筛选方式。
key	String		字段名称，作为result返回的条件的key
detailList	Array		条件列表
defaultSelectedIndex	Array/Number		默认选中的选项，可不设置。值为默认选中项的index或index的数组。

defaultSelectedIndex 默认选项说明

值类型	示例	说明
Array	'defaultSelectedIndex': [1,2,5]	当菜单为多选时('isMutiple': true)，如果默认选中多个选项，可将defaultSelectedIndex设置为数组。单选菜单和排序菜单请不要设置数组。
Number	'defaultSelectedIndex': 1	当菜单为单选或多选菜单只有一个默认值时，可设置为Number，如果你不小心设置为了String类型，也是没问题的。

detailList

属性名	类型	默认值	说明
title	String		条件名称
value	String		条件值

数据源格式

menuList: [
    {
        'title': '菜单1',
        'detailTitle': '子标题1',
        'isMutiple': true,
        'key': 'key_1',
        'detailList': [
            {
                'title': '不限',
                'value': ''
            },
            {
                'title': '条件_1_1',
                'value': 'val_1_1'
            },
            {
                'title': '条件1_2',
                'value': 'val_1_2'
            }
        ]
    },
    {
        'title': '菜单2',
        'detailTitle': '子标题2',
        'key': 'key_2',
        'isMutiple': false,
        'detailList': [
            {
                'title': '不限',
                'value': ''
            },
            {
                'title': '条件_2_1',
                'value': 'val_2_1'
            },
            {
                'title': '条件_2_2',
                'value': 'val_2_2'
            }
        ]
    },
    {
        'title': '菜单3',
        'detailTitle': '子标题3',
        'key': 'key_3',
        'isSort': true,
        'isMutiple': false,
        'detailList': [
            {
                'title': '条件_3_1',
                'value': 'val_3_1'
            },
            {
                'title': '条件_3_2',
                'value': 'val_3_2'
            },
            {
                'title': '条件_3_3',
                'value': 'val_3_3'
            }
        ]
    }
]

特别说明

• 请严格按照说明设置数据源
• menuList元素的个数，即为最外层菜单的个数
• 多选条件返回的数据类型是Array，其他为String
• 目前，当数据源不设置'isSort': true时，条件的第一项请设置为为“不限”，返回值可以自由设置。当点击了“不限”时，会清空当前条件菜单的条件，与“重置”功能一样。目前不可不设置。

使用示例

详细代码见 github demo

PS

如果能够帮助到你，希望能在github给个星星，谢谢~ >>>github传送门