# SortListMenu 排序菜单

# 引入说明

TIP

import SortListMenu from "jimoui/components/SortListMenu/SortListMenu";

# 代码演示

TIP

<SortListMenu
    :sortList="sortList"
    :filterData="filterData"
    :itemColor="'#FF680A'"
    :top="10"
    @onSelectFilter="onSelectFilter"
    @onSelectSort="onSelectSort"
></SortListMenu> 
<script>
export default kayakVue({
    data() {
        return {
            // 排序列表数据
            sortList: [
                {
                    checked: false,
                    propertyId: "0",
                    propertyName: "默认排序",
                },
                {
                    checked: false,
                    propertyId: "1",
                    propertyName: "销量",
                },
                {
                    checked: false,
                    propertyId: "4",
                    propertyName: "价格",
                    childrenList: [
                        {
                            checked: false,
                            propertyId: "2",
                            sortValue: "desc",
                        },
                        {
                            checked: false,
                            propertyId: "3",
                            sortValue: "asc",
                        },
                    ],
                },
            ],
            // 下拉筛选项列表数据
            filterData: {
                name: "配送时效",
                list: [
                    {
                        checked: true,
                        propertyId: "0",
                        propertyName: "全部时效",
                        sortValue: "all", // all-筛选全部值标志
                    },
                    {
                        checked: false,
                        propertyId: "1",
                        propertyName: "及时达",
                        sortValue: 0,
                    },
                    {
                        checked: false,
                        propertyId: "2",
                        propertyName: "多日达/品牌直发",
                        sortValue: 0,
                    },
                ],
            },
        }
    },
})
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

# 属性

sortList属性为必填项，其他属性非必填。

配置	用途	取值	使用描述
sortList	排序列表数据	Array（Object）	Object为没项对应对象数据 (checked:true/false是否选中；propertyId 选项对应的X唯一id，propertyName选项对应名称)
filterData	下拉筛选项列表数据	Object	name：下拉筛选项名称；position自定义下拉筛选覆层位置（top,left）；list下拉筛选项集合Array（Object）（checked:true/false是否选中，propertyId 选项对应的唯一id，propertyName选项对应名称；sortValue:'all'筛选全部值标识）
itemColor	默认选中状态文字/图标颜色	String	任意颜色色值
top	此组件距离页面顶部距离	Number	默认0。可自定义高度，用于下拉列表弹层定位top。避免当前组件上方元素未渲染完，导致弹层定位异常。
@onSelectFilter	点击下拉筛选项触发事件	$Event
@onSelectSort	点击排序项触发事件	$Event