上一篇我们说到了 driver.js 结合vue3使用引导页，现在再来介绍一个另外的插件叫 intro.js，也特比简单容易使用~
intro.js 是一个用于创建引导或教程的JavaScript库，它提供了简洁的方法来标识页面元素并为它们提供上下文信息。这可以帮助用户更好地理解应用的功能和界面。以下是一些关于 intro.js 的基本信息和使用方法：
主要特性
- 引导步骤：可以定义多个步骤，每个步骤可以指定对应的元素和需要展示的提示信息。
- 自定义选项：支持多种选项配置，包括按钮文本、进度条显示、样式配置等。
- 导航控制：用户可以通过“下一步”、“上一步”等按钮浏览引导，甚至可以选择跳过整个引导。
- 自定义样式：可以通过 CSS 类自定义提示框的样式。
- 键盘控制：支持使用键盘快捷键来操作引导，比如使用 Esc 键退出。
使用方式
直接参考官方文档配置案例即可：文档地址
效果演示
组件代码
<template>
<div>
<h1 ref="title">欢迎使用我的应用</h1>
<button ref="startButton" @click="startTour">开始引导</button>
<p>这里是一些说明文本。</p>
<div ref="feature" data-intro="这是一个重要的功能。">
这是一个重要的功能。
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import introJs from 'intro.js'
import 'intro.js/introjs.css' // 引入 intro.js 的样式
const title = ref(null)
const startButton = ref(null)
const feature = ref(null)
const startTour = () => {
const intro = introJs()
intro.setOptions({
prevLabel: '上一步',
nextLabel: '下一步',
skipLabel: '跳过',
doneLabel: '开始使用',
// 当前引导页只展示一次，设置dontShowAgain:true即可，默认提示语是英文的，dontShowAgainLabel可自定义设置，之后不在展示，会用cookie存储判断，可设置 名称及有效期
dontShowAgain: true,
dontShowAgainLabel: '当前引导页提示后，不在显示',
tooltipClass: 'intro-tooltip' /* 引导说明文本框的样式 */,
exitOnEsc: true /* 是否使用键盘Esc退出 */,
exitOnOverlayClick: false /* 是否允许点击空白处退出 */,
keyboardNavigation: true /* 是否允许键盘来操作 */,
showBullets: false /* 是否显示小圆点 */,
showStepNumbers: true /* 是否显示数字 */,
showProgress: false /* 是否显示进度条 */,
scrollToElement: true /* 是否滑动到高亮的区域 */,
overlayOpacity: 0.65, // 遮罩层的透明度 0-1之间
positionPrecedence: [
'bottom',
'top',
'right',
'left',
] /* 当位置选择自动的时候，位置排列的优先级 */,
disableInteraction: true /* 是否禁止与元素的相互关联 */,
hidePrev: false /* 是否在第一步隐藏上一步 */,
hideNext: false /* 是否在最后一步隐藏下一步 */,
steps: [
{
element: title.value,
intro: '这是应用的标题。',
},
{
element: startButton.value,
intro: '点击此按钮开始引导。',
},
{
element: feature.value,
intro: '这是一个重要功能的说明。',
},
],
})
intro.start() // 开始引导
}
</script>
可配置属性
export interface Options {
steps: Partial<IntroStep>[]; // 定义引导的每一步
hints: Partial<HintStep>[]; // 提供针对某些元素的提示
isActive: boolean; // 指示引导是否处于激活状态
nextLabel: string; // 定义“下一步”按钮的文本
prevLabel: string; // 定义“上一步”按钮的文本
skipLabel: string; // 定义“跳过”按钮的文本
doneLabel: string; // 定义“完成”或“开始使用”按钮的文本
hidePrev: boolean; // 控制是否在第一步隐藏“上一步”按钮
hideNext: boolean; // 控制是否在最后一步隐藏“下一步”按钮
nextToDone: boolean; // 在最后一步时“下一步”按钮是否显示为“完成”
tooltipPosition: string; // 设置提示框显示的位置（例如：“top”、“bottom”等）
tooltipClass: string; // 自定义提示框的 CSS 类名
group: string; // 将步骤分组的名称
highlightClass: string; // 自定义高亮元素的 CSS 类名
exitOnEsc: boolean; // 是否允许按 Esc 键退出引导
exitOnOverlayClick: boolean; // 是否允许点击覆盖层退出引导
showStepNumbers: boolean; // 控制是否在提示中显示步骤编号
stepNumbersOfLabel: string; // 定义步骤编号的标签文本
keyboardNavigation: boolean; // 是否允许使用键盘导航
showButtons: boolean; // 控制是否显示按钮
showBullets: boolean; // 控制是否显示步骤的圆点指示符
showProgress: boolean; // 控制是否显示进度条
scrollToElement: boolean; // 是否在高亮元素时滚动到其位置
scrollTo: ScrollTo; // 自定义滚动行为配置
scrollPadding: number; // 滚动到元素时的边距
overlayOpacity: number; // 设置覆盖层的透明度（0-1之间）
autoPosition: boolean; // 是否自动调整提示框的位置
positionPrecedence: TooltipPosition[]; // 提示框位置的优先级数组
disableInteraction: boolean; // 是否禁用与页面元素的交互
dontShowAgain: boolean; // 是否显示“下次不再显示”选项
dontShowAgainLabel: string; // “下次不再显示”选项的标签文本
dontShowAgainCookie: string; // 存储用户选择的 cookie 名称
dontShowAgainCookieDays: number; // “下次不再显示”选项的 cookie 有效天数
helperElementPadding: number; // 帮助元素周围的内边距
hintPosition: HintPosition; // 设置提示的显示位置
hintButtonLabel: string; // 提示按钮的标签文本
hintShowButton: boolean; // 控制是否显示提示按钮
hintAutoRefreshInterval: number; // 提示自动刷新的时间间隔
hintAnimation: boolean; // 控制提示是否显示动画效果
buttonClass: string; // 自定义按钮的 CSS 类名
progressBarAdditionalClass: boolean; // 是否给进度条添加额外的 CSS 类名
}
都这么详细了你还不会用？好了 引导的两个插件类同就分享到这吧~多一个选择多一条路！！！
