Menu 侧边导航组件

垂直展示的导航栏，用于在不同的内容区域之间进行切换。

📌平台差异说明

APP(vue)	H5	微信小程序	支付宝小程序
✔	✔	✔	✔

🏯基本使用示例

html

<!-- 全局使用 -->
<hy-menu :list="list"></hy-menu>

const list = [
    { title: '盖浇饭', icon: IconConfig.PHOTO },
    { title: '炒菜', value: 'title', disabled: true },
    { title: '米粉面条', value: 'showCancelButton' },
    { title: '汉堡披萨', value: 'buttonReverse' },
    { title: '饮品甜品', value: 'buttonReverse' },
    { title: '面点粥水饺混沌', value: 'buttonReverse' },
    { title: '小吃麻辣烫', value: 'buttonReverse' },
    { title: '中餐', value: 'buttonReverse' },
    { title: '西餐', value: 'buttonReverse' },
    { title: '大餐', value: 'buttonReverse' },
];

设置不同宽度

通过设置width设置宽度

html

<template>
    <hy-menu :list="list" width="150"></hy-menu>
</template>

设置选中颜色

通过设置color设置选中颜色

html

<template>
    <hy-menu :list="list" color="red"></hy-menu>
</template>

描点模型

vue.tsdata.js.scss

vue

<template>
    <hy-config-provider :custom-style="themeColor" :theme="darkMode">
        <hy-menu v-model="current" :list="list" color="red" @change="onChange"></hy-menu>

        <scroll-view
            class="scroll-view"
            scroll-y
            scroll-with-animation
            :scroll-top="scrollTop"
            :throttle="false"
            @scroll="onScroll"
        >
            <view :class="['item', `item--${item.id}`]" v-for="(item, index) in data" :key="index">
                <view class="hy-title">
                    <text class="text">{{ item.name }}</text>
                </view>
                <view class="hy-container">
                    <hy-grid
                        :list="item.children"
                        :col="2"
                        :custom-keys="{ icon: 'url', name: 'name' }"
                        :icon-config="{ size: 50 }"
                    ></hy-grid>
                </view>
            </view>
        </scroll-view>
    </hy-config-provider>
</template>

import { computed, onMounted, ref } from 'vue';
import { useThemeStore } from '@/store';
import { data } from './data';
import { IconConfig, debounce } from '@hy-app/ui';

// 组件
import HyMenu from '@/package/components/hy-menu/hy-menu.vue';
import HyGrid from '@/package/components/hy-grid/hy-grid.vue';
import HyConfigProvider from '@/package/components/hy-config-provider/hy-config-provider.vue';
import type { MenuParamsVo } from '@/package/components/hy-menu/typing';
import { getRect } from '@/package';

const themeStore = useThemeStore();

interface ItemTopVo {
    id: string | number;
    top: number;
}

const { themeColor, darkMode } = themeStore;
const scrollTop = ref<number>(0);
const itemScrollTop = ref<ItemTopVo[]>([]);
const current = ref<string | number>(1);
const list = [
    { id: 1, title: '盖浇饭', icon: IconConfig.PHOTO },
    { id: 2, title: '炒菜', value: 'title', disabled: true },
    { id: 3, title: '米粉面条', value: 'showCancelButton', badge: 6 },
    { id: 4, title: '汉堡披萨', value: 'buttonReverse' },
    { id: 5, title: '饮品甜品', value: 'buttonReverse' },
    { id: 6, title: '面点粥水饺混沌', value: 'buttonReverse' },
    { id: 7, title: '小吃麻辣烫', value: 'buttonReverse' },
    { id: 8, title: '中餐', value: 'buttonReverse' },
    { id: 9, title: '西餐', value: 'buttonReverse' },
    { id: 10, title: '大餐', value: 'buttonReverse' },
];

onMounted(() => {
    list.forEach((item) => {
        getRect(`.item--${item.id}`).then((rect) => {
            itemScrollTop.value.push({
                id: item.id,
                top: rect.top,
            });
        });
    });
});

function onScroll(e: any) {
    const { scrollTop } = e.detail;
    // 防止执行chang事件的时候改变当前值
    if (execute.value) {
        debounce(() => (execute.value = false));
        return;
    }

    const res = itemScrollTop.value
        .sort((a, b) => b.top - a.top)
        .find((item) => scrollTop >= item.top);
    current.value = res?.id || 1;
}

const onChange = (temp: MenuParamsVo) => {
    const res: ItemTopVo | undefined = itemScrollTop.value.find((item) => item.id === temp.id);
    scrollTop.value = res?.top || 0;
};

javascript

export const data = [
    {
        id: 1,
        name: '盖浇饭',
        children: [
            {
                key: '1-1',
                name: '蘑菇盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '1-2',
                name: '牛肉香菇盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '1-3',
                name: '鱼香肉丝盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '1-4',
                name: '肉末茄子盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '1-5',
                name: '红烧肉盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '1-6',
                name: '猪脚盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
        ],
    },
    {
        id: 3,
        name: '米粉面条',
        children: [
            {
                key: '3-1',
                name: '蘑菇盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '3-2',
                name: '牛肉香菇盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '3-3',
                name: '鱼香肉丝盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '3-4',
                name: '肉末茄子盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '3-5',
                name: '红烧肉盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '3-6',
                name: '猪脚盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
        ],
    },
    {
        id: 4,
        name: '汉堡披萨',
        children: [
            {
                key: '4-1',
                name: '蘑菇盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '4-2',
                name: '牛肉香菇盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '4-3',
                name: '鱼香肉丝盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '4-4',
                name: '肉末茄子盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '4-5',
                name: '红烧肉盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '4-6',
                name: '猪脚盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
        ],
    },
    {
        id: 5,
        name: '饮品甜品',
        children: [
            {
                key: '5-1',
                name: '蘑菇盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '5-2',
                name: '牛肉香菇盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '5-3',
                name: '鱼香肉丝盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '5-4',
                name: '肉末茄子盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '5-5',
                name: '红烧肉盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '5-6',
                name: '猪脚盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
        ],
    },
    {
        id: 6,
        name: '面点粥水饺混沌',
        children: [
            {
                key: '6-1',
                name: '蘑菇盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '6-2',
                name: '牛肉香菇盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '6-3',
                name: '鱼香肉丝盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '6-4',
                name: '肉末茄子盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '6-5',
                name: '红烧肉盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '6-6',
                name: '猪脚盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
        ],
    },
    {
        id: 7,
        name: '小吃麻辣烫',
        children: [
            {
                key: '7-1',
                name: '蘑菇盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '7-2',
                name: '牛肉香菇盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '7-3',
                name: '鱼香肉丝盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '7-4',
                name: '肉末茄子盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '7-5',
                name: '红烧肉盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '7-6',
                name: '猪脚盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
        ],
    },
    {
        id: 8,
        name: '中餐',
        children: [
            {
                key: '8-1',
                name: '蘑菇盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '8-2',
                name: '牛肉香菇盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '8-3',
                name: '鱼香肉丝盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '8-4',
                name: '肉末茄子盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '8-5',
                name: '红烧肉盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '8-6',
                name: '猪脚盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
        ],
    },
    {
        id: 9,
        name: '西餐',
        children: [
            {
                key: '9-1',
                name: '蘑菇盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '9-2',
                name: '牛肉香菇盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '9-3',
                name: '鱼香肉丝盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '9-4',
                name: '肉末茄子盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '9-5',
                name: '红烧肉盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '9-6',
                name: '猪脚盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
        ],
    },
    {
        id: 10,
        name: '大餐',
        children: [
            {
                key: '10-1',
                name: '蘑菇盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '10-2',
                name: '牛肉香菇盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '10-3',
                name: '鱼香肉丝盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '10-4',
                name: '肉末茄子盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '10-5',
                name: '红烧肉盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
            {
                key: '10-6',
                name: '猪脚盖浇饭',
                url: 'https://gips2.baidu.com/it/u=987818134,4255615059&fm=3003&app=3003&f=JPEG',
            },
        ],
    },
];

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326

scss

.hy-config-provider {
    display: flex;
}
.scroll-view {
    padding: 20rpx;
}

API

参数	说明	类型	默认值
list	菜单数据集	`MenuParamsVo[]`	-
id	绑定的唯一键	`string`	id
color	选中颜色	`string`	-
width	侧边菜单栏宽度，数值默认单位px	`number`\|`string`	120
icon	图标集合，详见图标Api	`HyIconProps`	-
badge	徽标属性集合，详见徽标Api	`HyBadgeProps`	-
customStyle	自定义需要用到的外部样式	`CSSProperties`	-
customClass	自定义外部类名	`string`	-

Events

事件名	说明	回调参数
change	选项切换时触发	(temp: MenuParamsVo, index: number)

Slots

插槽名	说明	接收值
default	自定义title	-
icon	图标自定义	-

Typings

显示类型声明

type MenuParamsVo = {
    /**
     *  唯一id
     * */
    id: string | number;
    /**
     *  标题下·
     * */
    title: string;
    /**
     *  是否禁用
     * */
    disabled?: boolean;
    /**
     *  icon
     * */
    icon?: string;
    /**
     *  徽标值
     * */
    badge?: number;
    /**
     *  键值
     * */
    [key: string]: string | number;
};

03:29

Menu 侧边导航组件 ​

📌平台差异说明 ​

🏯基本使用示例 ​

设置不同宽度 ​

设置选中颜色 ​

描点模型 ​

API ​

Menu Props ​

Events ​

Slots ​

Typings ​

📌平台差异说明

🏯基本使用示例

设置不同宽度

设置选中颜色

描点模型

API

Menu Props

Events

Slots

Typings