簡介
一款使用簡單的篩選組件，適配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 | 數(shù)組元素的個數(shù)為菜單item個數(shù) | |
| independence | Boolean | false | 是否為獨立菜單，不設置該字段默認為并列菜單 |
| titleColor | String | #666666 | menuBar菜單標題顏色 |
| themeColor | String | #000000 | 按鈕選中顏色和確認按鈕顏色 |
| @result | function | 選中條件的回調。參數(shù)為回調的條件對象 |
independence
默認為false，并列菜單
| 值 | 說明 |
|---|---|
| true | 獨立菜單。篩選菜單每個子菜單選擇完畢點擊確定回傳當前菜單結果 |
| false | 并列菜單：篩選菜單各個子菜單選擇完畢點擊確定后回傳所有結果 |
數(shù)據(jù)源
menuList
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| title | String | 一級篩選菜單名稱 | |
| detailTitle | String | 子標題，可作為說明。可不設置此字段 | |
| isMutiple | Boolean | false | 是否多選。為true時，可選擇多個條件；為false時，只能單選。 |
| isSort | Boolean | 為true時，為單選排序篩選方式。不填寫此字段為默認篩選方式。 | |
| key | String | 字段名稱，作為result返回的條件的key | |
| detailList | Array | 條件列表 | |
| defaultSelectedIndex | Array/Number | 默認選中的選項，可不設置。值為默認選中項的index或index的數(shù)組。 |
defaultSelectedIndex 默認選項說明
| 值類型 | 示例 | 說明 |
|---|---|---|
| Array | 'defaultSelectedIndex': [1,2,5] | 當菜單為多選時('isMutiple': true)，如果默認選中多個選項，可將defaultSelectedIndex設置為數(shù)組。單選菜單和排序菜單請不要設置數(shù)組。 |
| Number | 'defaultSelectedIndex': 1 | 當菜單為單選或多選菜單只有一個默認值時，可設置為Number，如果你不小心設置為了String類型，也是沒問題的。 |
detailList
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| title | String | 條件名稱 | |
| value | String | 條件值 |
數(shù)據(jù)源格式
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'
}
]
}
]
特別說明
- 請嚴格按照說明設置數(shù)據(jù)源
- menuList元素的個數(shù)，即為最外層菜單的個數(shù)
- 多選條件返回的數(shù)據(jù)類型是Array，其他為String
- 目前，當數(shù)據(jù)源不設置
'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開發(fā)',
'value': 'java'
},
{
'title': 'web開發(fā)',
'value': 'web'
},
{
'title': 'Android開發(fā)',
'value': 'Android'
},
{
'title': 'iOS開發(fā)',
'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': '發(fā)布時間',
'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傳送門
