簡(jiǎn)介
一款使用簡(jiǎn)單的篩選組件扔枫，適配app线脚、微信小程序嵌赠、H5。
dcloud插件市場(chǎng)地址：sl-filter
github demo地址：SongLazy/sl-filter
下拉菜單使用了 popup 彈出層組件
作者：1501324336@qq.com
感謝分享
效果圖
并列菜單
并列菜單
獨(dú)立菜單
獨(dú)立菜單
使用方式
在script中引用組件
import slFilter from '@/components/sl-filter/sl-filter.vue';
export default {
components: {
slFilter
}
}
屬性說明
Props
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| menuList | Array | 數(shù)組元素的個(gè)數(shù)為菜單item個(gè)數(shù) | |
| independence | Boolean | false | 是否為獨(dú)立菜單忽妒，不設(shè)置該字段默認(rèn)為并列菜單 |
| titleColor | String | #666666 | menuBar菜單標(biāo)題顏色 |
| themeColor | String | #000000 | 按鈕選中顏色和確認(rèn)按鈕顏色 |
| @result | function | 選中條件的回調(diào)玩裙。參數(shù)為回調(diào)的條件對(duì)象 |
independence
默認(rèn)為false，并列菜單
| 值 | 說明 |
|---|---|
| true | 獨(dú)立菜單锰扶。篩選菜單每個(gè)子菜單選擇完畢點(diǎn)擊確定回傳當(dāng)前菜單結(jié)果 |
| false | 并列菜單：篩選菜單各個(gè)子菜單選擇完畢點(diǎn)擊確定后回傳所有結(jié)果 |
數(shù)據(jù)源
menuList
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| title | String | 一級(jí)篩選菜單名稱 | |
| detailTitle | String | 子標(biāo)題献酗，可作為說明】琅＃可不設(shè)置此字段 | |
| isMutiple | Boolean | false | 是否多選罕偎。為true時(shí)，可選擇多個(gè)條件京闰；為false時(shí)颜及，只能單選。 |
| isSort | Boolean | 為true時(shí)蹂楣，為單選排序篩選方式俏站。不填寫此字段為默認(rèn)篩選方式。 | |
| key | String | 字段名稱痊土，作為result返回的條件的key | |
| detailList | Array | 條件列表 | |
| defaultSelectedIndex | Array/Number | 默認(rèn)選中的選項(xiàng)肄扎，可不設(shè)置。值為默認(rèn)選中項(xiàng)的index或index的數(shù)組赁酝。 |
defaultSelectedIndex 默認(rèn)選項(xiàng)說明
| 值類型 | 示例 | 說明 |
|---|---|---|
| Array | 'defaultSelectedIndex': [1,2,5] | 當(dāng)菜單為多選時(shí)('isMutiple': true)犯祠，如果默認(rèn)選中多個(gè)選項(xiàng)，可將defaultSelectedIndex設(shè)置為數(shù)組酌呆。單選菜單和排序菜單請(qǐng)不要設(shè)置數(shù)組衡载。 |
| Number | 'defaultSelectedIndex': 1 | 當(dāng)菜單為單選或多選菜單只有一個(gè)默認(rèn)值時(shí)，可設(shè)置為Number隙袁，如果你不小心設(shè)置為了String類型痰娱，也是沒問題的。 |
detailList
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| title | String | 條件名稱 | |
| value | String | 條件值 |
數(shù)據(jù)源格式
menuList: [
{
'title': '菜單1',
'detailTitle': '子標(biāo)題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': '子標(biāo)題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': '子標(biāo)題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'
}
]
}
]
特別說明
- 請(qǐng)嚴(yán)格按照說明設(shè)置數(shù)據(jù)源
- menuList元素的個(gè)數(shù)菩收，即為最外層菜單的個(gè)數(shù)
- 多選條件返回的數(shù)據(jù)類型是Array梨睁，其他為String
- 目前，當(dāng)數(shù)據(jù)源不設(shè)置
'isSort': true時(shí)娜饵，條件的第一項(xiàng)請(qǐng)?jiān)O(shè)置為為“不限”坡贺，返回值可以自由設(shè)置。當(dāng)點(diǎn)擊了“不限”時(shí)，會(huì)清空當(dāng)前條件菜單的條件拴念，與“重置”功能一樣。目前不可不設(shè)置褐缠。
使用示例
詳細(xì)代碼見 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': '請(qǐng)選擇職位類型（可多選）',
'isMutiple': true,
'key': 'jobType',
'detailList': [{
'title': '不限',
'value': ''
},
{
'title': 'uni-app',
'value': 'uni-app'
},
{
'title': 'java開發(fā)',
'value': 'java'
},
{
'title': 'web開發(fā)',
'value': 'web'
},
{
'title': 'Android開發(fā)',
'value': 'Android'
},
{
'title': 'iOS開發(fā)',
'value': 'iOS'
}
]
},
{
'title': '月薪',
'key': 'salary',
'isMutiple': true,
'detailTitle': '請(qǐng)選擇月薪范圍（可多選）',
'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': '請(qǐng)選擇（單選）',
'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': '默認(rèn)排序',
'value': ''
},
{
'title': '發(fā)布時(shí)間',
'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給個(gè)星星，謝謝~ >>>github傳送門
