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

一、介绍

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

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

二、主要特点

用户引导： Intro.js 可以创建引导，引导用户在网站上执行特定的操作或了解关键功能。
步骤和提示： 可以定义引导中的每个步骤，并为每个步骤提供提示，包括标题、描述和位置。
高亮显示元素： Intro.js 允许高亮显示网站上的特定元素，使其在引导中更为突出。
导航按钮： 提供导航按钮，使用户能够在引导的步骤之间进行切换。
自定义样式： 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', //这是添加引导的元素idintro: '引导一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', //这是添加引导的元素idintro: '引导步骤11111111111111111', //这是引导提示内容position: 'right' //这是引导位置
},
{element: '#two',intro: '步骤21111111111111111',position: 'left'
},
{element: '#finally',intro: '引导结束3333333',position: 'top'
}]
onMounted(() => {// nextTick(() => {// introTS(“路由”, “参数”) // 调用函数并传参intro(222221, stepsArr) // 调用函数并传参// })})</script>