uniapp可输入的下拉列表_uni-App 弹出下拉条件筛选菜单组件 sl-filter

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

简介

一款使用简单的筛选组件, 适配 App, 微信小程序, H5.

dcloud 插件市场地址: sl-filter

GitHub demo 地址: SongLazy/sl-filter

下拉菜单使用了 popup 弹出层组件

作者: 1501324336@qq.com

感谢分享

效果图

并列菜单

并列菜单

独立菜单

独立菜单

使用方式

在 script 中引用组件importslFilterfrom'@/components/sl-filter/sl-filter.vue';

exportdefault{

components:{

slFilter

}

}

属性说明

Props属性名类型默认值说明menuListArray数组元素的个数为菜单 item 个数

independenceBooleanfalse是否为独立菜单，不设置该字段默认为并列菜单

titleColorString#666666menuBar 菜单标题颜色

themeColorString#000000按钮选中颜色和确认按钮颜色

@resultfunction选中条件的回调。参数为回调的条件对象

independence

默认为 false, 并列菜单值说明true独立菜单。筛选菜单每个子菜单选择完毕点击确定回传当前菜单结果

false并列菜单：筛选菜单各个子菜单选择完毕点击确定后回传所有结果

数据源

menuList属性名类型默认值说明titleString一级筛选菜单名称

detailTitleString子标题，可作为说明。可不设置此字段

isMutipleBooleanfalse是否多选。为 true 时，可选择多个条件；为 false 时，只能单选。

isSortBoolean为 true 时，为单选排序筛选方式。不填写此字段为默认筛选方式。

keyString字段名称，作为 result 返回的条件的 key

detailListArray条件列表

defaultSelectedIndexArray/Number默认选中的选项，可不设置。值为默认选中项的 index 或 index 的数组。

defaultSelectedIndex 默认选项说明值类型示例说明Array'defaultSelectedIndex': [1,2,5]当菜单为多选时 ('isMutiple': true)，如果默认