聊一聊 intro.js

很多网站或者app， 我们第一次访问或者登陆的时候， 往往会看到好看友好的新手导航页面。如果这个功能我们自己来做， 首先， 首先， 需要有一个弹框， 其次， 获取DOM的位置来确定弹框的显示顺序， 然后要知道新手导航有几步，等等， 想做完美， 不是一件容易的事情。 然而， 我们可以站在居然的肩膀上， 这个巨人就是intro.js

废话不多说了， 进入正题吧！

在三大框架中， 我们选择angular2+ (intro.js有angular（1.x版本）)

首先， 需要安装intro.js

npm install --save intro.js @types/intro.js

安装完成后， 需要引入angular

// 在angular-cli.json文件中加入
···
styles：[
    "../node_modules/intro.js/minified/introjs.min.css".
    //还可以引入主题的css样式
]
···

 scripts：[
     "/node_modules/intro.js/minified/intro.min.js".
 ]
···

最后， 把intro.js导入文件中，

// intro.component.ts 
import * as intro from intro.js 

···
{
    const intro = intro.introJs()  
    // const intro = intro.introJs('#container')   加参数会在参数的DOM上显示新手导航
    intro.setOptions({
    skipLabel：'跳过',
    doneLabel:'完成',
    prevLabel:'上一步',
    nextLabel:'下一步'，
    steps:  [{
                 element: '#step1',  // 在对应的元素上加上 id="#step1"
                  intro: 'Step one description', // 导航显示的内容， 可以加图片
                  position: 'bottom'  // 导航现实的位置
                },
                {
                   element: '#step2',
                   intro: 'Step <i>two</i> description',
                  position: 'bottom'
                },
                {
                  element: '#step3',
                  intro: 'Step <span style="color: green;">three</span> description',
                  position: 'bottom'
                }]
});
    
    intro.onbeforechange(()=>{
        // 点击下一步导航前的回调
    })
    .onchange(()=>{
       // 点击下一步导航的回调
        
    }).onafterchange(()=>{
        // 点击下一步导航后的回调
        
    })
    intro.start()

}
···