vue+intro.js实现引导功能

前言：

        使用 intro.js这个插件，来实现一个引导性的效果，适用场景，比如：新手引导页，操作说明等等

效果图：

官网地址：点我

实现步骤：

1、安装

npm install intro.js --save
pnpm/cnpm  用法一样
 
yarn add intro.js

2、使用方法1，新建一个单独vue组件

template部分：

<template>
    <div class='card-demo'>我是界面写入的元素</div>
</template>

js部分：

import intro from "intro.js"  // introjs库
import "intro.js/introjs.css" // introjs默认css样式

data() {
    return {
      option: {
        // 参数对象
        prevLabel: "上一步",
        nextLabel: "下一步",
        skipLabel: "跳过",
        doneLabel: "完成",
        tooltipClass: "intro-tooltip" /* 引导说明文本框的样式 */,
        // highlightClass: 'intro-highlight', /* 说明高亮区域的样式 */
        exitOnEsc: true /* 是否使用键盘Esc退出 */,
        exitOnOverlayClick: false /* 是否允许点击空白处退出 */,
        keyboardNavigation: true /* 是否允许键盘来操作 */,
        showBullets: false /* 是否使用点显示进度 */,
        showProgress: false /* 是否显示进度条 */,
        scrollToElement: true /* 是否滑动到高亮的区域 */,
        skipHighlight: true,
        overlayOpacity: 0.5, // 遮罩层的透明度 0-1之间
        positionPrecedence: [
          "bottom",
          "top",
          "right",
          "left",
        ] /* 当位置选择自动的时候，位置排列的优先级 */,
        disableInteraction: false /* 是否禁止与元素的相互关联 */,
        hidePrev: true /* 是否在第一步隐藏上一步 */,
        hideNext: false /* 是否在最后一步隐藏下一步 */,
        steps: [] /* steps步骤，可以写个工具类保存起来 */,
      },
    }
}

methods:{
    init(){
        let steps= [{
            title: 'Welcome',
            intro: 'Hello World! 👋'
          },
          { // 图片的可以展示
            intro: '<img src="https://i.giphy.com/media/ujUdrdpX7Ok5W/giphy.webp" onerror="this.onerror=null;this.src=\'https://i.giphy.com/ujUdrdpX7Ok5W.gif\';" alt="">'
          },
          { // 可以指定界面上的元素，然后显示指定内容
            element: document.querySelector('.card-demo'),
            intro: 'This step focuses on an element'
          }]
        introJs().setOptions({
          ...this.option,// 配置属性
          steps: steps // 每一步展示的内容
        })
        .oncomplete(() => {    console.log("点击结束按钮后执行的事件")    })
        .onexit(() => {    console.log("点击跳过按钮后执行的事件")    })
        .onbeforeexit(() => { console.log('确认完毕之后执行的事件')    })
        .start()

        
    },
    
}

mounted(){
    this.init()
}

3、使用方法2

• data-title：标题文字
• data-intro：提示信息内容
• data-step：步骤的编号（优先级）
• data-tooltipClass：为提示定义CSS类
• data-highlightClass：将CSS类附加到helperLayer
• data-position：提示的位置，默认是bottom
• data-scrollTo：滚动到的元素，element或tooltip。默认值为element。
• data-disable-interaction：是否禁用与突出显示的框内的元素的交互

template部分：

<template>
  <div data-title="test1" data-intro="intro-test1" data-step='1'>
    第一步
  </div>
  <div data-title="test2" data-intro="intro-test2" data-step='2'>
    第二步
  </div>
  <div data-title="test3" data-intro="intro-test3" data-step='3'>
    第三步
  </div>
</template>

js部分：

mounted(){
    introJs().start()
}

4、键盘事件

window.addEventListener('keydown', function(event) {
    // 左箭头
    if(event.keyCode == 37) {
        console.log('左箭头被按下');
        // 在此处处理左箭头的逻辑
    }
    // 右箭头
    else if(event.keyCode == 39) {
        console.log('右箭头被按下');
        // 在此处处理右箭头的逻辑
    }
});