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),如果默认