Arco组件用法记录
arco
a-menu
菜单组件经常需要实现联动,联动需要使用的属性如下。都是数组因为如果不是手风琴模式,是可以打开多个菜单和多个项目的。
- open-keys
- selected-keys
js
1<a-menu
2 accordion
3 :open-keys="currentOpenKeys"
4 :selected-keys="currentItemKeys"
5 @sub-menu-click="openKeyAction"
6 @menu-item-click="selectedItemKeyAction"
7 >
8</a-menu>
9
10// 当前打开的子菜单列表
11const currentOpenKeys = ref<string[]>([])
12
13// 当前选中的子菜单
14const currentOpenKey = ref<string>('')
15
16// 当前选中的菜单项
17const currentSelectedItemKey = ref<string>('');
18
19// 操作选中的菜单项
20const selectedItemKeyAction = (key: string) => {
21 currentSelectedItemKey.value = key;
22}
23
24// 操作打开的子菜单
25const openKeyAction = (key: string, openKeys: string[]) => {
26 currentOpenKey.value = key;
27 currentOpenKeys.value = openKeys
28}
29