intro.js实现用户引导功能

2020-12-25 18:32:03 阅读：580 来源： 互联网

标签：false data introJs 用户 js step intro true 页面

参数说明：

steps:[{},{}]   //使用JSON配置定义步骤的信息
nextLabel:'next',  //下一步按钮标签
prevLabel:'back'  //上一个按钮标签
skipLabel:'skip'  //跳过按钮标签
doneLabel:'done'  //完成按钮标签
hidePrev:'true/false'  //隐藏第一步中的上一个按钮
exitOnOverlayClick:'true/false'  //单击叠加层时退出介绍
showStepNumbers:'true/false'  //是否在红色圆圈中显示步骤编号
showProgress:'true/false'  //是否显示介绍进度
keyboardNavigation:'true/false'  //是否使用键盘导航
showBullets:'true/false'  //是否显示“点点点”进度提示

data-step：显示步骤、提示到第几步（优先级）
data-intro：显示引导的内容
data-position：引导内容显示位置【left,right,top,bottom】
data-tooltipClass: 自定义提示层样式

introJs.start（） //开始
introJs.goToStep(2)  //跳转到具体的步骤介绍
introJs.onchange(function(){})  //完成每个步骤后，将调用给定的回调函数

1，一般用法：

<link rel="stylesheet" href="../css/introjs.css">
<script src="../js/intro.js"></script>

<div class="div">
        <div data-step="2" data-intro="第二步的提示内容！">这是第二步页面展示内容。</div>
        <div data-step="1" data-intro="第一步的提示内容！">这是第一步页面展示内容。</div>
        <div data-step="3" data-intro="第三步的提示内容！">这是第三步页面展示内容。</div>
</div>

 <script>
     setTimeout(function(){
         introJs().setOptions({
         nextLabel: '下一步',
         prevLabel: '上一步',
         doneLabel: '完成',
         exitOnOverlayClick: false,
         showStepNumbers: true,
         }).start();
     })
 </script>

2，在Vue中使用
注意：在data-step、data-intro前要有":"

<link rel="stylesheet" href="../css/introjs.css">
<script src="../js/intro.js"></script>
<script src="../js/vue.js"></script>

<div id="app">
    <div v-for="item in steps">
        <div :data-step=item.step :data-intro=item.dataIntro>{{item.value}}</div>
    </div>
</div>

<script>
    setTimeout(function(){
        introJs().setOptions({
        nextLabel: '下一步',
        prevLabel: '上一步',
        doneLabel: '完成',
        exitOnOverlayClick: false,
        showStepNumbers: true,
        }).start();
    })
</script>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            steps:[
                {
                    dataIntro:"第一步的提示内容！",
                    value:"这是第一步页面展示内容。",
                    step:1
                },
                {
                    dataIntro:"第二步的提示内容！",
                    value:"这是第二步页面展示内容。",
                    step:2
                },
                {
                    dataIntro:"第三步的提示内容！",
                    value:"这是第三步页面展示内容。",
                    step:3
                }
            ]
        }
    })
</script>

效果展示：
效果展示1

效果展示2
效果展示3
推荐：
https://www.ibm.com/developerworks/cn/web/wa-interactive-doc-javascript-introjs-bluemix-trs/index.html
https://www.cnblogs.com/lhb25/p/15-best-jquery-site-tour-plugins.html
官网API：
https://introjs.com/docs/intro/api

标签：false,data,introJs,用户,js,step,intro,true,页面
来源： https://blog.csdn.net/sanyecao12138/article/details/111686521

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

intro.js实现用户引导功能