前言

Intro.js的官方文档：https://introjs.com/docs/getting-started/install 
利用Intro.js实现简单的新手引导 

效果：

下载依赖配置

打开官网Intro.js Documentation | Intro.js Docs (introjs.com)可以看到官网的下载依赖npm install intro.js --save 和yarn add intro.js

当然也可以下载到本地引入使用intro.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

打开连接引入对应版本的js文件和css文件（连接为线上地址，可以打开把内容复制到本地文件中引入）

页面引入实现效果

1.引入js和css文件（这里我是下载到了本地）

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="./introjs.css" />
</head>
<script type="text/javascript" src="./intro.js"></script>

 2.DOM元素，其中data-intro是每一步的备注讲解；data-step是第几步第几步

<div id="app">
        <div class="v2">
            <div class="v" data-step="1" data-intro="第1步,先这样" style="width: 100px;">我                                是内容1</div>
            <div class="v" data-step="2" data-intro="第2步,再先这样" style="width: 100px;">我是内容2</div>
            <div class="v" data-step="3" data-intro="第3步,最后这样" style="width: 100px;">我是内容3</div>
        </div>
        <el-button @click="caozuo()">操作引导</el-button>
    </div>

 3.调用方法  其中mounted里面是打开页面就调用，当然也可以通过按钮去调用方法。
confirm("请确认是否退出操作引导")为退出操作引导时的一个确认信息

<script>
        let vm = new Vue({
            el: '#app',
            data: {
                
            },
            mounted() {
                introJs(".v2").onbeforeexit(function () {
                    return confirm("请确认是否退出操作引导");
                }).start()
            },
            methods: {
                caozuo() {
                    introJs(".v2").onbeforeexit(function () {
                        return confirm("请确认是否退出操作引导");
                    }).start()
                }
            }
        })
    </script>

更多配置(调用方式分为两种)

1.有一些常用配置项帮大家列举出来可自行根据需求更改

introJs('.v2').setOptions({
                nextLabel: "下一步", // 下一个的按钮文字
                prevLabel: "上一步", // 上一个按钮文字
                //   skipLabel: "跳过", // 跳过指引的按钮文字
                doneLabel: "完成", // 完成按钮的文字
                hidePrev: false, // 是否在第一步中隐藏“上一步”按钮;不隐藏，将呈现为一个禁用的按钮
                hideNext: false, // 是否在最后一步中隐藏“下一步”按钮（同时会隐藏完成按钮);不隐藏，将呈现为一个禁用的按钮
                exitOnEsc: true, // 点击键盘的ESC按钮是否退出指引
                exitOnOverlayClick: false, // 点击遮罩层时是否退出介绍
                showStepNumbers: false, // 是否显示步骤编号
                disableInteraction: true, // 是否禁用高亮显示框内元素的交互
                showBullets: true, // 是否显示面板的指示点
                overlayOpacity: 0.7, // 遮罩层的透明度 0-1之间
                helperElementPadding: 10, // 选中的指引元素周围的填充距离
                showProgress: true, //进度条
            })
            // 点击结束按钮后执行的事件
            .oncomplete(() => {
            })
            // 点击跳过按钮后执行的事件
            .onexit(() => {
            })
            // 确认完毕之后执行的事件
            .onbeforeexit(() => {
              localStorage.setItem("introValue1","true")
            }).start();

根据DOM元素ID进行引导

      // 绑定标签元素的选择器数组
      let yindaoList = [
        {
          element: document.querySelector('#problemDescription'), // 定位到相应的元素位置，如果不设置element，则默认展示在屏幕中央
          title: '提交工单', // 标题
          intro: '这里用来描述您的问题' // 内容
        },
        {
          element: document.querySelector('#attachments'), 
          title: '提交工单', // 标题
          intro: '这里可以上传附件' // 内容
        },
        {
          element: document.querySelector('#telephone'), 
          title: '提交工单', // 标题
          intro: '留下您的电话吧~方便专业顾问联系您' // 内容
        },
        {
          element: document.querySelector('#submit'), 
          title: '提交工单', // 标题
          intro: '别忘了要点击提交' // 内容
        },
        {
          element: document.querySelector('#historicalWorkOrder'), 
          title: '提交工单', // 标题
          intro: '这里可以查看历史提交工单' // 内容
        },
      ];
introJs().setOptions({
                steps: yindaoList, //上面声明的数组
                nextLabel: "下一步", // 下一个的按钮文字
                prevLabel: "上一步", // 上一个按钮文字
                //   skipLabel: "跳过", // 跳过指引的按钮文字
                doneLabel: "完成", // 完成按钮的文字
                hidePrev: false, // 是否在第一步中隐藏“上一步”按钮;不隐藏，将呈现为一个禁用的按钮
                hideNext: false, // 是否在最后一步中隐藏“下一步”按钮（同时会隐藏完成按钮);不隐藏，将呈现为一个禁用的按钮
                exitOnEsc: true, // 点击键盘的ESC按钮是否退出指引
                exitOnOverlayClick: false, // 点击遮罩层时是否退出介绍
                showStepNumbers: false, // 是否显示步骤编号
                disableInteraction: true, // 是否禁用高亮显示框内元素的交互
                showBullets: true, // 是否显示面板的指示点
                overlayOpacity: 0.7, // 遮罩层的透明度 0-1之间
                helperElementPadding: 10, // 选中的指引元素周围的填充距离
                showProgress: true, //进度条
            })
            // 点击结束按钮后执行的事件
            .oncomplete(() => {
            })
            // 点击跳过按钮后执行的事件
            .onexit(() => {
            })
            // 确认完毕之后执行的事件
            .onbeforeexit(() => {
              localStorage.setItem("introValue1","true")
            }).start();

结束

最后希望本篇文章能够帮助小伙伴们，更多详细配置api可以看一下官方文档，里面都很详细
官网连接

# 前端 # javascript # 开发语言 # vue.js
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

avatar 华为云开发者联盟
cover

FT-FMEA融合混沌演练，零售运营系统韧性架构在线验证实践

avatar 华为云开发者联盟
cover

如何使用Python和Plotly绘制3D图形

avatar 华为云开发者联盟