• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 不依赖UI组件的全局菜单 (openMenu)
2
3[菜单控制 (Menu)](arkts-popup-and-menu-components-menu.md)在使用时依赖绑定UI组件，否则无法使用。从API version 18开始，可以通过使用全局接口[openMenu](../reference/apis-arkui/js-apis-arkui-UIContext.md#openmenu18)的方式，在无UI组件的场景下直接或封装使用，例如在事件回调中使用或封装后对外提供能力。
4
5## 弹出菜单
6
7通过[openMenu](../reference/apis-arkui/js-apis-arkui-UIContext.md#openmenu18)可以弹出菜单。
8
9   ```ts
10   promptAction.openMenu(contentNode, { id: targetId }, {
11     enableArrow: true
12   })
13     .then(() => {
14       console.info('openMenu success');
15     })
16     .catch((err: BusinessError) => {
17       console.info('openMenu error: ' + err.code + ' ' + err.message);
18     })
19   ```
20
21### 创建ComponentContent
22
23   通过调用openMenu接口弹出菜单，需要提供用于定义自定义弹出框的内容[ComponentContent](../reference/apis-arkui/js-apis-arkui-ComponentContent.md)。其中，wrapBuilder(buildText)封装自定义组件，new Params(this.message)是自定义组件的入参，可以缺省，也可以传入基础数据类型。
24
25   ```ts
26   private contentNode: ComponentContent<Object> = new ComponentContent(uiContext, wrapBuilder(buildText), this.message);
27   ```
28
29   如果在wrapBuilder中包含其他组件（例如：[Popup](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-Popup.md#popup)、[Chip](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-Chip.md#chip)组件），则[ComponentContent](../reference/apis-arkui/js-apis-arkui-ComponentContent.md#componentcontent-1)应采用带有四个参数的构造函数constructor，其中options参数应传递{ nestingBuilderSupported: true }。
30
31   ```ts
32   @Builder
33   export function buildText(params: Params) {
34     Menu({
35       // 类型设置图标内容
36       icon: {
37         image: $r('app.media.app_icon'),
38         width: 32,
39         height: 32,
40         fillColor: Color.White,
41         borderRadius: 10
42       } as MenuIconOptions,
43       // 设置文字内容
44       title: {
45         text: `This is a Menu title 1`,
46         fontSize: 20,
47         fontColor: Color.Black,
48         fontWeight: FontWeight.Normal
49       } as MenuTextOptions,
50       // 设置文字内容
51       message: {
52         text: `This is a Menu message 1`,
53         fontSize: 15,
54         fontColor: Color.Black
55       } as MenuTextOptions,
56       // 设置按钮内容
57       buttons: [{
58         text: 'confirm',
59         action: () => {
60           console.info('confirm button click')
61         },
62         fontSize: 15,
63         fontColor: Color.Black,
64       },
65         {
66           text: 'cancel',
67           action: () => {
68             console.info('cancel button click')
69           },
70           fontSize: 15,
71           fontColor: Color.Black
72         },] as [MenuButtonOptions?, MenuButtonOptions?]
73     })
74   }
75
76   let contentNode: ComponentContent<Object> = new ComponentContent(uiContext, wrapBuilder(buildText), this.message, { nestingBuilderSupported: true });
77   ```
78
79
80### 绑定组件信息
81
82   通过调用openPopup接口弹出气泡，需要提供绑定组件的信息[TargetInfo](../reference/apis-arkui/js-apis-arkui-UIContext.md#targetinfo18)。若未传入有效的target，则无法弹出气泡。
83
84   ```ts
85   let frameNode: FrameNode | null = this.ctx.getFrameNodeByUniqueId(this.getUniqueId());
86   let targetId = frameNode?.getChild(0)?.getUniqueId();
87   ```
88
89### 设置弹出菜单样式
90
91   通过调用openMenu接口弹出菜单，可以设置[MenuOptions](../reference/apis-arkui/arkui-ts/ts-universal-attributes-menu.md#menuoptions10)属性调整菜单样式。title属性不生效。preview参数仅支持设置MenuPreviewMode类型。
92
93   ```ts
94   private options: MenuOptions = { enableArrow: true, placement: Placement.Bottom };
95   ```
96
97## 更新菜单样式
98
99通过[updateMenu](../reference/apis-arkui/js-apis-arkui-UIContext.md#updatemenu18)可以更新菜单的样式。支持全量更新和增量更新其菜单样式，不支持更新showInSubWindow、preview、previewAnimationOptions、transition、onAppear、aboutToAppear、onDisappear和aboutToDisappear。
100
101   ```ts
102   promptAction.updateMenu(contentNode, {
103     enableArrow: false
104   }, true)
105     .then(() => {
106       console.info('updateMenu success');
107     })
108     .catch((err: BusinessError) => {
109       console.info('updateMenu error: ' + err.code + ' ' + err.message);
110     })
111   ```
112
113## 关闭菜单
114
115通过[closeMenu](../reference/apis-arkui/js-apis-arkui-UIContext.md#closemenu18)可以关闭菜单。
116
117   ```ts
118   promptAction.closeMenu(contentNode)
119     .then(() => {
120       console.info('openMenu success');
121     })
122    .catch((err: BusinessError) => {
123      console.info('openMenu error: ' + err.code + ' ' + err.message);
124    })
125   ```
126
127> **说明：**
128>
129> 由于[updateMenu](../reference/apis-arkui/js-apis-arkui-UIContext.md#updatemenu18)和[closeMenu](../reference/apis-arkui/js-apis-arkui-UIContext.md#closemenu18)依赖content来更新或者关闭指定的菜单，开发者需自行维护传入的content。
130
131## 在HAR包中使用全局菜单
132
133可以通过[HAR](../quick-start/har-package.md)包封装一个Menu，从而对外提供菜单的弹出、更新和关闭能力。
134
135具体调用方式参考[在HAR包中使用全局气泡提示](./arkts-popup-and-menu-components-uicontext-popup.md#在har包中使用全局气泡提示)。
136