此答案仅适用于JSBin。

Question

Here is the vaadin-context-menu documentation page

在该页面上，有一个标有 TRY IT OUT that links to a demo page here的按钮。

我的问题是，我无法让演示页面真正做任何事情。我在控制台中看不到任何错误。

我的问题到底了吗？或者演示有什么问题吗？如果它是后者，我如何修复代码以使演示工作？

请在正常工作的jsBin或Codepen中显示解决方案。

https://jsbin.com/yihupap/1/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>vaadin-context-menu demo</title>
  <script src="https://cdn.vaadin.com/vaadin-core-elements/master/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-context-menu/vaadin-context-menu.html">

  <!-- import paper-menu and paper-item -->
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-listbox/paper-listbox.html">
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-item/paper-item.html">
</head>
<body>

<vaadin-context-menu>
  <template>
    <paper-listbox>
      <paper-item>First menu item</paper-item>
      <paper-item>Second menu item</paper-item>
    </paper-listbox>
  </template>

  <p>This paragraph has the context menu provided in the above template.</p>
  <p>Another paragraph with the context menu.</p>
</vaadin-context-menu>
</body>
</html>

Answer 1

问题实际上是JSBin和Safari。我甚至无法在Safari（版本10.1.1 12603.2.4）中加载该darn页面。

但主要的演示页面可以在safari，chrome等中使用： http://vaadin.com/elements/-/element/vaadin-context-menu#demos

改用它。

根据您的问题，请按照此处的要求使用相同的示例：https://codepen.io/anon/pen/MozOxG

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>vaadin-context-menu demo</title>
  <script src="https://cdn.vaadin.com/vaadin-core-elements/master/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-context-menu/vaadin-context-menu.html">

  <!-- import paper-menu and paper-item -->
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-listbox/paper-listbox.html">
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-item/paper-item.html">
</head>
<body>

<vaadin-context-menu>
  <template>
    <paper-listbox>
      <paper-item>First menu item</paper-item>
      <paper-item>Second menu item</paper-item>
    </paper-listbox>
  </template>

  <p>This paragraph has the context menu provided in the above template.</p>
  <p>Another paragraph with the context menu.</p>
</vaadin-context-menu>
</body>
</html>

Answer 2

编辑：@petey在评论中指出此答案仅适用于尝试从jsBin运行vaadin-context-menu时。所以问题可能出在jsBin和Safari之间，而不是Vaadin和Safari。

此答案仅适用于JSBin。

适用于Chrome。但不是在Safari上。（运行macOS Sierra v.10.12.5。）

vaadin-context-menu

Browser  Support
-------  -------
Chrome     ✅
Safari     ❌

Safari目前显然不支持vaadin-context-menu。下面是使用Safari然后使用Chrome的屏幕录制。

（注：在以下录音中：绿色圆圈表示右键单击。黑色圆圈表示左键单击。）

Safari❌

v10.1.1（12603.2.4）：

Chrome✅

v59.0.3071.115（官方建设）（64位）：

如何让vaadin-context-menu演示工作？

2 个答案:

此答案仅适用于JSBin。

Safari❌

Chrome✅