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

问题描述：

Here is the vaadin-context-menu documentation page。如何让vaadin-context-menu演示工作？

在该页面上，有一个标签为的按钮试试看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>

使用这些jsbin链接，我得到当右键单击在Chrome 59.0.3071.115段落半透明的上下文菜单，所以我会怀疑你的结局。 – Morfic

适用于我。你有没有右键点击第一段。 – petey

工作示例如下：https://vaadin.com/elements/-/element/vaadin-context-menu#demos – petey

答

这个问题实际上是JSBin和Safari。我甚至不能在Safari中加载网页（版本10.1.1 12603.2.4）。

但主要的演示页面并在Safari中，铬等工作： http://vaadin.com/elements/-/element/vaadin-context-menu#demos

使用，来代替。

如这里要求是一个使用你的问题同样的例子工作codepen：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>

答

编辑：@petey指出了一个意见，即试图从jsBin运行vaadin-context-menu时，这个答案只适用。所以问题可能出在jsBin和Safari之间，而不是Vaadin和Safari。

这个答案只适用于JSBin。

它适用于Chrome。但不适用于Safari。（MacOS的运行塞拉利昂v.10.12.5。）

vaadin-context-menu

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

Safari浏览器显然不会在这个时候支持vaadin-context-menu。以下是使用Safari和Chrome的屏幕录像。

（注：在下面的记录：绿色圆圈表示点击右键黑色圆圈表示左击。）

Safari浏览器❌

v10.1.1（12603.2.4）：

铬✅

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

这不是准确的！主要演示页面在Safari（版本10.1.1 12603.2.4）中工作得很好：https：//vaadin.com/elements/-/element/vaadin-context-menu#demos JSBin＆safari中的某些东西一定是愚蠢的，但不是vaadin＆safari。 – petey

@petey：我可以证实：[我的演示程序在Safari中正常工作]（http://vaadin.com/elements/-/element/vaadin-context-menu#demos）。我同意，问题很可能是jsBin和Safari之间的东西。我相应地编辑了我的答案。我向所有Vaadin工程师道歉。你做得很好。 – Mowzer

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

这个答案只适用于JSBin。

Safari浏览器❌

铬✅

相关推荐