时间戳

首页 > 解决方案 > Angular - 如何使用“返回”键在表格行中定位上下文菜单

angular - Angular - 如何使用“返回”键在表格行中定位上下文菜单

问题描述

环境：Angular，Bootstrap4。目前选择此步骤是为了使表格更易于访问。在不久的将来，我们将以更加 WCAG 的方式使表格可见。请专注于这个问题。

包含动态数据的表中的每一行都包含一个上下文菜单。见下图。当然，这是一个简化版本，只有 2 个选项。

使用上下文菜单，用户选择一个动作。通常，上下文菜单通过鼠标单击或鼠标右键单击来激活。事件数据用于定位上下文菜单。在这个简单的案例中，上下文菜单包含 2 个项目：显示和编辑。多年来工作良好。当然，我可以让菜单更显眼。

在此处输入图像描述

当上下文菜单处于选项卡顺序时，用户可以使用“返回”来激活菜单。问题是事件的坐标在页面上的任何位置。

上下文菜单代码是：

<div tabindex="-1" *ngIf="contextmenu===true">
  <app-contextmenu [x]="contextmenuX" [y]="contextmenuY" [menuitems]="showMenuOptions()"
                   (menuItemSelected)="handleMenuSelection($event)"></app-contextmenu>
</div>

如何从选项卡选择的上下文菜单中检索坐标（x，y），因此是点图标或表格单元格？我可以使用该位置来定位上下文菜单。

每个表行都包含最后一个表行代码：

<td tabindex="0" class="col-1" (click)="onrightClick($event, journalEntry)" (keydown.enter)="onrightClick($event, journalEntry)"
    (contextmenu)="onrightClick($event, journalEntry)">
  <fa-icon [icon]="ellipsisV" size="1x" alt="..." aria-label="..."  [styles]="{'stroke': 'blue', 'color': 'blue'}"></fa-icon>
</td>

当页面包含上下文菜单时，我将其放在页面底部：

<div tabindex="-1" *ngIf="contextmenu===true">
  <app-contextmenu [x]="contextmenuX" [y]="contextmenuY" [menuitems]="showMenuOptions()"
                   (menuItemSelected)="handleMenuSelection($event)"></app-contextmenu>
</div>

上下文菜单的代码是：

<div class="contextmenu" [ngStyle]="{'left.px': x, 'top.px': y}">
  <ul class="list-group">
    <li class="list-group-item" *ngFor="let menuItem of theMenuItems">
      <span (click)="outputSelectedMenuItem( menuItem)">{{ menuItem }}</span>
    </li>
  </ul>
</div>

标签： angularwcag2.0

解决方案

放置上下文菜单并使用 data 和 bool 的通用行 id 将其隐藏。当用户单击时，传递行包含的数据并将 bool 设置为 true。如果 bool 为真，则显示上下文菜单。并在进行更改后将 bool 设置为 false。

推荐阅读