第一步:安装依赖
npm install intro.js --save
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'
import 'intro.js/introjs.css'
import 'intro.js/themes/introjs-modern.css'
import { nextTick, onMounted } from "vue";
export default {
setup() {
const initPageIntro = () => {
const allSteps = [
{
element: '#one',
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>