简介
一款使用简单的筛选组件, 适配 App, 微信小程序, H5.
dcloud 插件市场地址: sl-filter
GitHub demo 地址: SongLazy/sl-filter
下拉菜单使用了 popup 弹出层组件
作者: 1501324336@qq.com
感谢分享
效果图
并列菜单
并列菜单
独立菜单
独立菜单
使用方式
在 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
- <template>
- <view class="content">
- <sl-filter :themeColor="themeColor" :menuList="menuList" @result="result"></sl-filter>
- </view>
- </template>
- <script>
- import slFilter from '@/components/sl-filter/sl-filter.vue';
- export default {
- components: {
- slFilter
- },
- data() {
- return {
- themeColor: '#000000',
- filterResult: '',
- menuList: [{
- 'title': '职位',
- 'detailTitle': '请选择职位类型 (可多选)',
- 'isMutiple': true,
- 'key': 'jobType',
- 'detailList': [{
- 'title': '不限',
- 'value': ''
- },
- {
- 'title': 'uni-app',
- 'value': 'uni-app'
- },
- {
- 'title': 'java 开发',
- 'value': 'java'
- },
- {
- 'title': 'web 开发',
- 'value': 'web'
- },
- {
- 'title': 'Android 开发',
- 'value': 'Android'
- },
- {
- 'title': 'iOS 开发',
- 'value': 'iOS'
- }
- ]
- },
- {
- 'title': '月薪',
- 'key': 'salary',
- 'isMutiple': true,
- 'detailTitle': '请选择月薪范围 (可多选)',
- 'detailList': [{
- 'title': '不限',
- 'value': ''
- },
- {
- 'title': '7000~8000',
- 'value': '7000~8000'
- },
- {
- 'title': '8000~9000',
- 'value': '8000~9000'
- },
- {
- 'title': '9000~10000',
- 'value': '9000~10000'
- },
- {
- 'title': '10000 以上',
- 'value': '10000~1000000'
- }
- ]
- },
- {
- 'title': '单选',
- 'key': 'single',
- 'isMutiple': false,
- 'detailTitle': '请选择 (单选)',
- 'detailList': [{
- 'title': '不限',
- 'value': ''
- },
- {
- 'title': '条件 1',
- 'value': 'test_1'
- },
- {
- 'title': '条件 2',
- 'value': 'test_2'
- },
- {
- 'title': '条件 3',
- 'value': 'test_3'
- },
- {
- 'title': '条件 4',
- 'value': 'test_4'
- },
- {
- 'title': '条件 5',
- 'value': 'test_5'
- }
- ]
- },
- {
- 'title': '排序',
- 'key': 'sort',
- 'isSort': true,
- 'detailList': [{
- 'title': '默认排序',
- 'value': ''
- },
- {
- 'title': '发布时间',
- 'value': 'add_time'
- },
- {
- 'title': '薪资最高',
- 'value': 'wages_up'
- },
- {
- 'title': '离我最近',
- 'value': 'location'
- }
- ]
- }
- ]
- }
- },
- onLoad() {
- },
- methods: {
- result(val) {
- console.log('filter_result:' + JSON.stringify(val));
- this.filterResult = JSON.stringify(val, null, 2)
- }
- }
- }
- </script>
- PS
如果能够帮助到你, 希望能在 GitHub 给个星星, 谢谢~>>>GitHub 传送门
来源: http://www.jianshu.com/p/27362856b8b1