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/b/v3/OgyxMPr0SPSaNn44Zv968g/zh-cn_image_0000002625187697.png?HW-CC-KV=V1&HW-CC-Date=20260612T073321Z&HW-CC-Expire=86400&HW-CC-Sign=1923D28FA456CCF02217F364186B4BC8B2CA057A10E3C32A0B7B4289DCD47B7F)

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/84/v3/ODf76loeQjmq5IKW7R5V8Q/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260612T073321Z&HW-CC-Expire=86400&HW-CC-Sign=1E6B6D84D2D9CA01EBE8002366183CEC761AE5078CC1655EAAD12D2D76814950)

*   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/b5/v3/lo1ZIQ8GQH6-EPGhX1ZpHQ/zh-cn_image_0000002625107841.png?HW-CC-KV=V1&HW-CC-Date=20260612T073321Z&HW-CC-Expire=86400&HW-CC-Sign=CD3B0ED2840AF897B5CBE835C36B3BDEEC1A6FC1BA9EF5C31FA8D172CF7E847A)

#### 绑定事件

为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/61/v3/f7NxHqKQQZCQ_zFQDs7Fkg/zh-cn_image_0000002594668324.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073321Z&HW-CC-Expire=86400&HW-CC-Sign=7E0092186924C4FAF4C3CBFDAA8788D035102B269E77692E56A3171E688D5C23)