Intro.js 是一个用于创建交互式引导和教程的 JavaScript 库。它可以帮助你向用户展示应用程序的功能、导航和特性,并提供步骤指导,以便他们更好地理解和使用你的应用。
为什么需要去封装
- 封装初始化配置,避免在项目中每处使用都去配置
- 优化使用体验,保证每次调用尽可能少的去写冗余的内容
- 针对SPA,使用
onUnmounted
确保切换页面效果正常,且在调用处无需手动处理页面卸载的情况
具体封装
首先安装intro.js
shell
pnpm add intro.js
js
import type { Options } from 'intro.js/src/option'
import type { IntroStep } from 'intro.js/src/core/steps'
import introJs from 'intro.js'
import 'intro.js/minified/introjs.min.css'
// 自定义覆盖的intro样式
import './assets/introJs.css'
export const useIntro = (steps: Partial<IntroStep>[], options?: Partial<Options>) => {
const intro = introJs().setOptions({
// 配置项目需要的默认初始值
exitOnEsc: false,
hidePrev: true,
exitOnOverlayClick: false,
showButtons: false,
showBullets: false,
steps,
...options,
}).onbeforechange(async () => {
// 每次切换前增加0.5s延迟
return new Promise((resolve) => {
setInterval(resolve, 500)
})
})
function stop() {
intro.exit(true)
}
function start() {
nextTick(() => {
intro.start()
})
}
function next() {
intro.nextStep()
}
onUnmounted(() => {
stop()
})
// 导出
return {
intro, stop, start, next,
}
}
导出一共四个内容
intro
: 当前intro.js的实例,可以根据文档调用实例方法stop
: 关闭当前引导start
:开始引导next
:手动下一步
业务使用
js
const { intro, start, next } = useIntro([
{
element: '#album',
intro: '选择素材',
},
{
element: '#add',
intro: '确认添加',
position: 'top',
},
])
封装后使用更加便利,只需要传入对应的步骤即可,无需其他额外处理