如何在Polymer 2中使用intro.js？

我想在我的Polymer 2应用程序中使用intro.js来获得首次用户体验。下面是我试图使用的代码，但它不适合我。如何在Polymer 2中使用intro.js？

<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/"> 
<script src="webcomponentsjs/webcomponents-lite.js"></script> 
<link rel="import" href="polymer/polymer.html"> 
<script src="intro.js/minified/intro.min.js"></script> 
<link rel="import" type="css" href="intro.js/minified/introjs.min.css"> 

<dom-module id="my-app"> 
    <template> 
     <style> 
     </style> 
     <p class="line1" data-intro='Hello step one!' data-step="1">Line 1</p> 
     <p class="line2" data-intro='Hello step two!' data-step="2">Line 2</p> 
     <p class="line3" data-intro='Hello step three!' data-step="3">Line 3</p> 
     <p class="line4" data-intro='Hello step four!' data-step="4">Line 4</p> 
    </template> 
</dom-module> 

connectedCallback(){ 
    super.connectedCallback(); 
    introJs().start(); 
}

这里是Codepen为相同。因为，intro.js是不是聚合物网络组件，因此，我无法弄清楚如何与聚合物使用2

来源

2017-08-09 Amanshu Kataria

因为你拥有了它，现在

旁白它不会工作

如果要导入外部风格到聚合物元素，你需要使用style-modules读here，从今以后，最好。
link rel=import type=css已过时，但如果您仍想使用它们，则应将它们放置在您的dom-module之内，以便聚合物将其填满。
intro.js，不能被定义为您的聚合物元素。 JS的范围是通过IIFE的，你可能必须编写一个包装来自己做任何外部脚本

这就是如果你严格希望一切作用域。

关于你的问题

的问题是，intro.js，无法访问您的元素中的DOM。因此，不能达到任何你P标签

一个解决方案，就是移动/它们分发到像文档本身外范围，通过使用slots

<dom-module id="my-app"> 
    <template> 
    <!-- uncomment this, if you have a style module pointing to intro'scss only--> 
    <!--<style include="intro-css"></style>--> 
    <slot> 

    </slot> 
    </template> 
</dom-module>

现在，所有你需要做的是，将所有的DOM放在标签内<my-app></my-app>

只有这样intro.js才能在它们上面工作。 plunker

来源

2017-08-09 16:49:26

这真的很有用:) –

如何在Polymer 2中使用intro.js？

回答

相关问题