第一步：安装依赖
npm install intro.js --save
//支持ts
npm i --save-dev @types/intro.js
第二步：在shims-vue.d.ts添加这段代码
declare module 'intro.js'
第三步：在需要的页面中引入并使用
<template>
<div class="container">
<div id="one">引导一</div>
<div id="two">引导二</div>
</div>
<div id="finally">引导结束</div>
</template>
<script>
import IntroJs from 'intro.js' // introjs库
import 'intro.js/introjs.css' // introjs默认css样式
// introjs还提供了多种主题，可以通过以下方式引入
import 'intro.js/themes/introjs-modern.css'
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>