HarmonyOS应用开发-Jsmenu菜单组件

鸿蒙时代
发布于 2022-3-17 10:43
浏览
0收藏

HarmonyOS应用开发-Jsmenu菜单组件-鸿蒙开发者社区
说明:
该组件从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
提供菜单组件,作为临时性弹出窗口,用于展示用户可执行的操作。
子组件
<option>子组件。

属性
除支持通用属性外,还支持如下属性:
HarmonyOS应用开发-Jsmenu菜单组件-鸿蒙开发者社区
样式
仅支持如下样式:
HarmonyOS应用开发-Jsmenu菜单组件-鸿蒙开发者社区
HarmonyOS应用开发-Jsmenu菜单组件-鸿蒙开发者社区
事件
仅支持如下事件:
HarmonyOS应用开发-Jsmenu菜单组件-鸿蒙开发者社区
仅支持如下方法。
HarmonyOS应用开发-Jsmenu菜单组件-鸿蒙开发者社区
示例:

<!-- xxx.hml -->
<div class="container">
    <button onclick="onTextClick" class="title-text">Show popup menu.</button>
    <menu id="apiMenu" onselected="onMenuSelected">
        <option value="Item1">选项1</option>
        <option value="Item2">选项2</option>
        <option value="Item3">选项3</option>
    </menu>
</div>

/* xxx.css */
.container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.title-text {
    width: 200px;
    height: 30px;
}

// xxx.js
import prompt from '@system.prompt';
export default {
    onMenuSelected(e) {
        prompt.showToast({
            message: e.value
        })
    },
    onTextClick() {
        this.$element("apiMenu").show({x:280,y:400});
    }
}

效果:
HarmonyOS应用开发-Jsmenu菜单组件-鸿蒙开发者社区

分类
标签
HarmonyOS应用开发-Jsmenu菜单组件.docx 61.28K 6次下载
menu菜单组件.rar 790.08K 23次下载
1
收藏
回复
举报
回复
    相关推荐