1# 菜单控制（Menu）
2Menu是菜单接口，一般用于鼠标右键弹窗、点击弹窗等。具体用法请参考[菜单控制](../reference/apis-arkui/arkui-ts/ts-universal-attributes-menu.md)。
3
4使用[bindContextMenu](../reference//apis-arkui/arkui-ts/ts-universal-attributes-menu.md#bindcontextmenu12)并设置预览图，菜单弹出时有蒙层，此时为模态。
5
6使用[bindMenu](../reference/apis-arkui/arkui-ts/ts-universal-attributes-menu.md#bindmenu11)或bindContextMenu未设置预览图时，菜单弹出无蒙层，此时为非模态。
7
8## 生命周期
9
10| 名称| 类型 | 说明 |
11| --- | --- | --- |
12| aboutToAppear  | () =>  void | 菜单显示动效前的事件回调。 |
13| onAppear | () =>  void | 菜单弹出时的事件回调。 |
14| aboutToDisappear | () =>  void | 菜单退出动效前的事件回调。 |
15| onDisappear  | () =>  void | 菜单消失时的事件回调。 |
16
17
18
19## 创建默认样式的菜单
20
21菜单需要调用bindMenu接口来实现。bindMenu响应绑定组件的点击事件，绑定组件后手势点击对应组件后即可弹出。
22
23```ts
24Button('click for Menu')
25  .bindMenu([
26    {
27      value: 'Menu1',
28      action: () => {
29        console.info('handle Menu1 select')
30      }
31    }
32  ])
33```
34
35![zh-cn_image_0000001562940565](figures/zh-cn_image_0000001562940565.png)
36
37## 创建自定义样式的菜单
38
39当默认样式不满足开发需求时，可使用[@Builder](../../application-dev/quick-start/arkts-builder.md)自定义菜单内容，通过bindMenu接口进行菜单的自定义。
40
41### @Builder开发菜单内的内容
42
43```ts
44class Tmp {
45  iconStr2: ResourceStr = $r("app.media.view_list_filled")
46
47  set(val: Resource) {
48    this.iconStr2 = val
49  }
50}
51
52@Entry
53@Component
54struct menuExample {
55  @State select: boolean = true
56  private iconStr: ResourceStr = $r("app.media.view_list_filled")
57  private iconStr2: ResourceStr = $r("app.media.view_list_filled")
58
59  @Builder
60  SubMenu() {
61    Menu() {
62      MenuItem({ content: "复制", labelInfo: "Ctrl+C" })
63      MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" })
64    }
65  }
66
67  @Builder
68  MyMenu() {
69    Menu() {
70      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
71      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" }).enabled(false)
72      MenuItem({
73        startIcon: this.iconStr,
74        content: "菜单选项",
75        endIcon: $r("app.media.arrow_right_filled"),
76        // 当builder参数进行配置时，表示与menuItem项绑定了子菜单。鼠标hover在该菜单项时，会显示子菜单。
77        builder: this.SubMenu
78      })
79      MenuItemGroup({ header: '小标题' }) {
80        MenuItem({ content: "菜单选项" })
81          .selectIcon(true)
82          .selected(this.select)
83          .onChange((selected) => {
84            console.info("menuItem select" + selected);
85            let Str: Tmp = new Tmp()
86            Str.set($r("app.media.icon"))
87          })
88        MenuItem({
89          startIcon: $r("app.media.view_list_filled"),
90          content: "菜单选项",
91          endIcon: $r("app.media.arrow_right_filled"),
92          builder: this.SubMenu
93        })
94      }
95
96      MenuItem({
97        startIcon: this.iconStr2,
98        content: "菜单选项",
99        endIcon: $r("app.media.arrow_right_filled")
100      })
101    }
102  }
103
104  build() {
105    // ...
106  }
107}
108
109```
110
111### bindMenu属性绑定组件
112
113```ts
114Button('click for Menu')
115  .bindMenu(this.MyMenu)
116```
117
118![zh-cn_image_0000001511580924](figures/zh-cn_image_0000001511580924.png)
119
120## 创建支持右键或长按的菜单
121
122通过bindContextMenu接口自定义菜单，设置菜单弹出的触发方式，触发方式为右键或长按。使用bindContextMenu弹出的菜单项是在独立子窗口内的，可显示在应用窗口外部。
123
124- @Builder开发菜单内的内容与上文写法相同。
125- 确认菜单的弹出方式，使用bindContextMenu属性绑定组件。示例中为右键弹出菜单。
126
127  ```ts
128  Button('click for Menu')
129    .bindContextMenu(this.MyMenu, ResponseType.RightClick)
130  ```
131
132
133