Vue3网站用户引导功能【Intro.js】

一、介绍

Intro.js 是一个用于创建网站用户引导、功能介绍和教程的 JavaScript 库。它允许开发者通过步骤和提示突出显示网站上的特定元素，以帮助用户更好地了解和使用网站的功能。以下是 Intro.js 的一些关键特点和用法介绍：

更多Intro.js 功能网址：Intro.js Themes | Intro.js Docs

二、主要特点

1. 用户引导： Intro.js 可以创建引导，引导用户在网站上执行特定的操作或了解关键功能。
2. 步骤和提示： 可以定义引导中的每个步骤，并为每个步骤提供提示，包括标题、描述和位置。
3. 高亮显示元素： Intro.js 允许高亮显示网站上的特定元素，使其在引导中更为突出。
4. 导航按钮： 提供导航按钮，使用户能够在引导的步骤之间进行切换。
5. 自定义样式： Intro.js 允许开发者自定义引导的样式，以匹配网站的设计风格。

三、代码实现

1.JS方式实现

（1）安装Intro.js插件

npm install intro.js --save // 使用npm安装

或

yarn add intro.js // 使用yarn安装

（2）引入Intro.js

import IntroJs from 'intro.js' // introjs库
import 'intro.js/introjs.css' // introjs默认css样式
// import 'intro.js/themes/introjs-modern.css' // introjs主题

（3）实现整体Vue引导

<template>
  <div class="container">
    <div id="one">引导111111</div>
    <div id="two">引导2222222</div>
  </div>
  <div id="finally">引导333333</div>
</template>
<script>
import IntroJs from 'intro.js' // introjs库
import 'intro.js/introjs.css' // introjs默认css样式
// import 'intro.js/themes/introjs-modern.css' // introjs主题
// introjs还提供了多种主题，可以通过以下方式引入
import 'intro.js/themes/introjs-dark.css' // introjs主题
import { nextTick, onMounted } from "vue";
export default {
  setup() {
    const initPageIntro = () => {
      // 引导图
      const allSteps = [
        {
          element: '#one', //这是添加引导的元素id
          intro: '引导一1111111111111111', //这是引导提示内容
          position: 'right' //这是引导位置
        },
        {
          element: '#two',
          intro: '引导二1111111111111111',
          position: 'left'
        },
        {
          element: '#finally',
          intro: '引导结束',
          position: 'top'
        }
      ]

      const curIntro = IntroJs()
      curIntro.setOptions({
        prevLabel: `上一步`,
        nextLabel: `下一步`,
        skipLabel: `跳过`,
        doneLabel: `完成`,
        tooltipPosition: `bottom` /* 引导说明框相对高亮说明区域的位置 */,
        hidePrev: `true`, // 隐藏第一步中的上一个按钮
        tooltipClass: `` /* 引导说明文本框的样式 */,
        highlightClass: `` /* 说明高亮区域的样式 */,
        exitOnOverlayClick: false /* 是否允许点击空白处退出 */,
        showStepNumbers: false /* 是否显示说明的数据步骤*/,
        keyboardNavigation: false /* 是否允许键盘来操作 */,
        showButtons: true /* 是否按键来操作 */,
        showBullets: true /* 是否使用点点点显示进度 */,
        showProgress: false /* 是否显示进度条 */,
        scrollToElement: true /* 是否滑动到高亮的区域 */,
        overlayOpacity: 0.6 /* 遮罩层的透明度 */,
        positionPrecedence: [`bottom`, `top`, `right`, `left`] /* 当位置选择自动的时候，位置排列的优先级 */,
        disableInteraction: false, /* 是否禁止与元素的相互关联 */
        hintPosition: 'top-middle',
        steps: allSteps
      })
      curIntro.oncomplete(() => {
        // 点击结束按钮后执行的事件
        console.log(`oncomplete`)
      })
      curIntro.onexit(() => {
        // 点击跳过按钮后执行的事件
        console.log(`onexit`)
      })
      curIntro.onchange(() => {
        // 点击下一步执行的事件
        console.log(`onchange`)
      })
      curIntro.start()
    }
    onMounted(() => {
      nextTick(() => {
        initPageIntro()
      })
    })
  }
}
</script>

1.TS封装方式实现

 （1）安装Intro.js插件

npm install intro.js --save // 使用npm安装

或

yarn add intro.js // 使用yarn安装

（2）创建TS文件进行封装

import introJs from 'intro.js'
import 'intro.js/introjs.css' // introjs默认css样式  
// import 'intro.js/themes/introjs-modern.css' // introjs主题

/**
 * @name: 新手指导
 * @param {String} pathname 当前页面的path
 * @param {Array} stepsArr 步骤内容（包括element、intro）
 * @return {*}
 */
export function intro(pathname: any, stepsArr: any) {
    let guideObj = JSON.parse(localStorage.getItem('introCache')) || {}
    if (!guideObj[pathname]) {
        guideObj[pathname] = '1'
        localStorage.setItem('guide', JSON.stringify(guideObj))
        introJs().setOptions({
            prevLabel: "上一步",
            nextLabel: "下一步",
            skipLabel: "✕",
            doneLabel: "完成",
            tooltipPosition: "bottom" /* 引导说明框相对高亮说明区域的位置 */,
            hidePrev: "true", // 隐藏第一步中的上一个按钮
            tooltipClass: "" /* 引导说明文本框的样式 */,
            highlightClass: "" /* 说明高亮区域的样式 */,
            exitOnOverlayClick: false /* 是否允许点击空白处退出 */,
            showStepNumbers: false /* 是否显示说明的数据步骤*/,
            keyboardNavigation: false /* 是否允许键盘来操作 */,
            showButtons: true /* 是否按键来操作 */,
            showBullets: true /* 是否使用点点点显示进度 */,
            showProgress: false /* 是否显示进度条 */,
            scrollToElement: true /* 是否滑动到高亮的区域 */,
            overlayOpacity: 0.6 /* 遮罩层的透明度 */,
            positionPrecedence: ["bottom", "top", "right", "left"] /* 当位置选择自动的时候，位置排列的优先级 */,
            disableInteraction: false, /* 是否禁止与元素的相互关联 */
            hintPosition: 'top-middle',
            steps: stepsArr
        }).start()
    }
}

（3）代码实现

<template>
  <div class="container">
    <div id="one">引导步骤1</div>
    <div id="two">引导步骤2</div>
  </div>
  <div id="finally">引导结束3333</div>
</template>
<script setup  lang="ts">
import { intro } from "./introJs.ts"
import { nextTick, onMounted } from "vue";

// 新手指导
const stepsArr = [{
  element: '#one', //这是添加引导的元素id
  intro: '引导步骤11111111111111111', //这是引导提示内容
  position: 'right' //这是引导位置
},
{
  element: '#two',
  intro: '步骤21111111111111111',
  position: 'left'
},
{
  element: '#finally',
  intro: '引导结束3333333',
  position: 'top'
}]
onMounted(() => {
  // nextTick(() => {
  // introTS(“路由”, “参数”) // 调用函数并传参
  intro(222221, stepsArr) // 调用函数并传参
  // })

})


</script>

额外：

可以提供其他的样式进行指引。可以直接导入下方样式路径即可。