5.25 menu组件

menu

提供菜单组件，作为临时性弹出窗口，用于展示用户可执行的操作。

支持设备

手机	平板	智慧屏	智能穿戴
支持	支持	支持	不支持

子组件

<option>子组件。

属性

除支持通用属性外，还支持如下属性：↵

名称	类型	默认值	必填	描述
target	string	-	否	目标元素选择器。当使用目标元素选择器后，点击目标元素会自动弹出menu菜单。弹出菜单位置优先为目标元素右下角，当右边可视空间不足时会适当左移，当下方空间不足时会适当上移。
type	string	click	否	目标元素触发弹窗的方式，可选值有： click：点击弹窗。 longpress：长按弹窗。
title	string	-	否	菜单标题内容。

说明

不支持focusable、disabled属性。

样式

仅支持如下样式：

名称	类型	默认值	必填	描述
text-color	<color>	-	否	设置菜单的文本颜色。
font-size	<length>	30px	否	设置菜单的文本尺寸。
allow-scale	boolean	true	否	设置菜单的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 说明 如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。
letter-spacing	<length>	0	否	设置菜单的字符间距。
font-style	string	normal	否	设置菜单的字体样式。见text组件font-style的样式属性。
font-weight	number | string	normal	否	设置菜单的字体粗细。见text组件font-weight的样式属性。
font-family	string	sans-serif	否	设置菜单的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

事件

仅支持如下事件：

名称	参数	描述
selected	{ value:value }	菜单中某个值被点击选中时触发，返回的value值为option组件的value属性。
cancel	-	用户取消。

方法

仅支持如下方法。

名称	参数	描述
show	{ x:x, y:y }	显示menu菜单。(x, y)指定菜单弹窗位置。其中x表示距离可见区域左边沿的 X 轴坐标，不包含任何滚动偏移，y表示距离可见区域上边沿的 Y 轴坐标，不包含任何滚动偏移以及状态栏。菜单优先显示在弹窗位置右下角，当右边可视空间不足时会适当左移，当下方空间不足时会适当上移。

示例 

hml

<div class="container">
    <text onclick="onTextClick" class="title-text">Show popup menu.</text><!--点击文字触发菜单栏-->
    <menu id="apiMenu" onselected="onMenuSelected"><!--onselected菜单中某个值被点击选中时触发，返回的value值为option组件的value属性。-->
        <option value="Item 1">Item 1</option><!--菜单栏内容-->
        <option value="Item 2">Item 2</option><!---->
        <option value="Item 3">Item 3</option><!---->
    </menu>
    <text onclick="jk" class="title-text">Show.</text><!---->
    <menu id="jk"  type="longpress" onselected="jks"><!--type可设置触发弹窗的方式，可选值有：
                                                                                    click：点击弹窗。
                                                                                    longpress：长按弹窗。-->
        <option value="Item 4">Item 4</option><!---->
        <option value="Item 5">Item 5</option><!---->
        <option value="Item 6">Item 6</option><!---->
    </menu><!---->
</div><!---->

css

.container {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.title-text {
    margin: 20px;
}

js

import prompt from '@system.prompt';
export default {
    onMenuSelected(e) {
        prompt.showToast({
            message: e.value//返回选择的value的值
        })
    },
    jks(e) {
        prompt.showToast({
            message: e.value
        })
    },
    onTextClick() {
        this.$element("apiMenu").show({x:280,y:120});
    },
    jk() {
        this.$element("jk").show({x:280,y:120});//触发菜单栏的id和位置
    }
}

图片

 补充option

当作为<select>的子组件时用来展示下拉选择的具体项目。

当作为<menu>的子组件时用来展示弹出菜单的具体项目。

支持设备

手机	平板	智慧屏	智能穿戴
支持	支持	支持	不支持

子组件

不支持。

属性

除支持通用属性外，还支持如下属性：↵

名称	类型	默认值	必填	描述
selected	boolean	-	否	选择项是否为下拉列表的默认项，仅在父组件是select时生效。
value	string	-	是	选择项的值，作为select、menu父组件的selected事件中的返回值。 说明 option选项的UI展示值需要放在标签内，如<option value="10">十月</option>
icon	string	-	否	图标资源路径，该图标展示在选项文本前，图标格式为jpg，png和svg。

样式

支持如下样式。

名称	类型	默认值	必填	描述
color	<color>	#e6000000	否	选择项的文本颜色。
font-size	<length>	16px	否	选择项的文本尺寸。
allow-scale	boolean	true	否	选择项的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 说明 如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。
font-weight	number | string	normal	否	选择项的字体粗细，见text组件font-weight的样式属性。
text-decoration	string	none	否	选择项的文本修饰，见text组件text-decoration的样式属性。
font-family	string	sans-serif	否	选择项的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。