如何在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？

回答

相關問題