menu开发指导
========

提供菜单组件，作为临时性弹出窗口，用于展示用户可执行的操作，具体用法请参考[menu](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-menu)。

#### 创建menu组件

在pages/index目录下的hml文件中创建一个menu组件，添加target、type、title属性。

<!-- xxx.hml-->
<div class="container">
  <text class="title-text" id="textId">show menu</text>
  <menu target="textId" type="click" title="title">
    <option value="Item 1">Item 1</option>
    <option value="Item 2">Item 2</option>
    <option value="Item 3">Item 3</option>
  </menu>
</div>

/\* xxx.css \*/
.container{
  width: 100%;
  height: 100%;
  flex-direction: column;
  background-color: #F1F3F5;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.title-text{
  font-size: 35px;
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f4/v3/XjCWR-kPRhmhgRx0tgdNjg/zh-cn_image_0000002634008754.png?HW-CC-KV=V1&HW-CC-Date=20260709T132322Z&HW-CC-Expire=86400&HW-CC-Sign=9769651EBCFED8DF76ECC71001A1F53121588E0FDFBC2C1EC14CA3CDF6421840)

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/3e/v3/IPIe7wG7SQqX__fz5ibCtQ/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T132322Z&HW-CC-Expire=86400&HW-CC-Sign=035E1E0771C1C237D87C2C2635CD3DF941154C0C517947D02BBDF2862B7D922D)

*   menu仅支持[option](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-option)子组件。
    
*   menu组件不支持focusable、disabled属性。
    

#### 设置样式

为menu组件设置样式，例如字体颜色、大小、字符间距等。

<!-- xxx.hml-->
<div class="container">
  <text class="title-text" id="textId">show menu</text>
  <menu target="textId" type="click" title="title">
    <option value="Item 1">Item 1</option>
    <option value="Item 2">Item 2</option>
    <option value="Item 3">Item 3</option>
  </menu>
</div>

/\* xxx.css \*/
.container{
  width: 100%;
  height: 100%;
  flex-direction: column;
  background-color: #F1F3F5;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.title-text{
  font-size: 35px;
  background-color: #5a5aee;
  color: white;
  width: 70%;
  text-align: center;
  height: 85px;
  border-radius: 12px;
}
.menu{
  text-color: blue;
  font-size: 35px;
  letter-spacing: 2px;
}
option{
  color: #6a6aef;
  font-size: 30px;
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a5/v3/KiAHkGUWQGGFT2pSgZvm5w/zh-cn_image_0000002664207901.png?HW-CC-KV=V1&HW-CC-Date=20260709T132322Z&HW-CC-Expire=86400&HW-CC-Sign=A67DDE0A2024C903C5D3AE10B836D8C04C5699775DCE83FE4DFCA9D488D75102)

#### 绑定事件

为menu组件绑定oncancel事件（取消操作时触发）。

<!-- xxx.hml-->
<div class="container">
  <text  class="title-text" id="textId" onclick="textClick">show menu</text>
  <menu  title="title" oncancel="cancel" id="menuId">
    <option value="Item 1">Item 1</option>
    <option value="Item 2">Item 2</option>
    <option value="Item 3">Item 3</option>
  </menu>
</div>

/\* xxx.css \*/
.container{
  width: 100%;
  height: 100%;
  flex-direction: column;
  background-color: #F1F3F5;
  width: 100%;
}
.title-text{
  font-size: 35px;
  background-color: #5a5aee;
  color: white;
  width: 70%;
  text-align: center;
  height: 85px;
  border-radius: 12px;
  margin-top: 500px;
  margin-left: 15%;
}
menu{
  text-color: blue;
  font-size: 35px;
  letter-spacing: 2px;
}
option{
  color: #6a6aef;
  font-size: 30px;
}

// xxx.js
import promptAction from '@ohos.promptAction';
export default {
  cancel() {
    promptAction.showToast({
      message: "cancel"
    })
  },
  textClick() {
    this.$element("menuId").show({ x: 175,y: 590 });
  }
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/8/v3/wBDGwpwoS7KInDex3J0PZA/zh-cn_image_0000002664327961.gif?HW-CC-KV=V1&HW-CC-Date=20260709T132322Z&HW-CC-Expire=86400&HW-CC-Sign=134F3BE3C3E0C10F3F64A979D6A677E955EDAC45AA0FF86AECC3DA28C89AAE98)