@abcum/ember-contextmenu 中文文档教程

Question

ember-contextmenu

用于向 Ember.js 应用程序添加上下文快捷菜单的 ember 插件。

Usage

Installation

ember install @abcum/ember-contextmenu

Introduction

ember-contextmenu 插件添加了使用右键单击按钮将上下文快捷菜单添加到 Ember.js 应用程序的功能。 除了特定区域或 ember 组件的单独菜单外，自定义上下文菜单还可以应用于整个应用程序。

Examples

将 context-menu 组件添加到您的应用程序模板。

{{!-- app/templates/application.hbs --}}
{{context-menu}}

要防止出现默认菜单，请将 right-click 组件添加到应用程序模板。

{{!-- app/templates/application.hbs --}}
{{#right-click menu="application.menu"}}
    {{!-- all content --}}
{{/right-click}}

{{!-- app/templates/application/menu.hbs --}}
<div class="context-menu-item" {{action (history-back)}}>Back</div>
<div class="context-menu-item" {{action (history-forward)}}>Forward</div>
<div class="context-menu-item" {{action (reload)}}>Reload</div>
<div class="context-menu-item" {{action (transition-to 'logout')}}>Logout</div>
<div class="context-menu-line"></div>
<div class="context-menu-item disabled">© Abcum Ltd</div>

向组件添加菜单时，使用 context-menu 混合，并使用 menuName 键指定文件。

import Ember from "ember";
import MenuMixin from 'ember-contextmenu/mixins/context-menu';

export default Ember.Component.extend(MenuMixin, {
    menuName: 'posts.menu',
});

或者，如果您想在操作后显示菜单，请使用 context-menu 帮助程序，并指定文件名。

{{#each model as |post|}}
    {{blog-post contextMenu=(context-menu 'post.menu' model=post)}}
{{/each}}

Development

• make install (install bower and ember-cli dependencies)
• make upgrade (upgrade ember-cli to the specified version)
• make tests (run all tests defined in the package)