1# ContextMenu
2
3在页面范围内关闭通过[bindContextMenu](./ts-universal-attributes-menu.md#bindcontextmenu12)属性绑定的菜单。
4
5>  **说明：**
6>
7> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8>
9> 从API version 12开始，可以通过使用[UIContext](../js-apis-arkui-UIContext.md#uicontext)中的[getContextMenuController](../js-apis-arkui-UIContext.md#contextmenucontroller12)来明确UI的执行上下文。
10
11## ContextMenu.close
12
13static close()
14
15可以通过该方法在页面范围内关闭通过[bindContextMenu](./ts-universal-attributes-menu.md#bindcontextmenu12)给组件绑定的菜单。
16
17**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
18
19**系统能力：** SystemCapability.ArkUI.ArkUI.Full
20
21## 示例
22
23该示例为ContextMenu.close关闭通过bindContextMenu属性绑定的菜单。
24
25>  **说明：**
26>
27> 推荐通过使用[UIContext](../js-apis-arkui-UIContext.md#uicontext)中的[getContextMenuController](../js-apis-arkui-UIContext.md#contextmenucontroller12)来明确UI的执行上下文。
28
29```ts
30// xxx.ets
31@Entry
32@Component
33struct Index {
34  @Builder MenuBuilder() {
35    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
36      Button('Test ContextMenu1')
37      Divider().strokeWidth(2).margin(5).color(Color.Black)
38      Button('Test ContextMenu2')
39      Divider().strokeWidth(2).margin(5).color(Color.Black)
40      Button('Test ContextMenu3')
41    }
42    .width(200)
43    .height(160)
44  }
45
46  build() {
47    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
48      Column() {
49        Text("Test ContextMenu")
50          .fontSize(20)
51          .width('100%')
52          .height(500)
53          .backgroundColor(0xAFEEEE)
54          .textAlign(TextAlign.Center)
55      }
56      .bindContextMenu(this.MenuBuilder, ResponseType.LongPress)
57      .onDragStart(()=>{
58        // 拖拽时关闭菜单
59        ContextMenu.close() // 建议使用 this.getUIContext().getContextMenuController().close()
60      })
61    }
62    .width('100%')
63    .height('100%')
64  }
65}
66```
67
68![contextmenu_close.gif](figures/contextmenu_close.gif)