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

Question

Here is the vaadin-context-menu documentation page.

在那个页面上，有一个标签为 试试看 that links to a demo page here.

的按钮

我的问题是我无法让演示页面实际执行任何操作。我在控制台中没有看到任何错误。

是我这边的问题吗？还是demo有问题？如果是后者，我该如何修改代码才能使演示正常运行？

请在可用的 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

编辑：@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.

的屏幕录制

(注：在下面的录音中：绿色圆圈表示右键单击。黑色圆圈表示左键单击。)

野生动物园 ❌

v10.1.1 (12603.2.4):

Chrome ✅

v59.0.3071.115（正式版）（64 位）：

Answer 2

问题实际上出在 JSBin 和 Safari 上。我什至无法在 Safari（版本 10.1.1 12603.2.4）中加载该死的页面。

但主要演示页面在 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>

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

How to get the vaadin-context-menu demo to work?

vaadin

web-component

polymer

polymer-2.x

vaadin-core-elements

此答案仅适用于 JSBin。

野生动物园 ❌

Chrome ✅