前端使用intro.js实现页面操作引导

前言

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文件（这里我是下载到了本地）

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

        

            
我                                是内容1
            
我是内容2
            
我是内容3
        
        操作引导
    

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

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

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可以看一下官方文档，里面都很详细
官网连接