使用intro.js实现web页面的引导页

1、引入intro的js和对于的样式，如下：

<!-- 引入 Intro.js 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/4.0.0/introjs.min.css">


<!-- 引入 Intro.js 的 JavaScript 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/4.0.0/intro.min.js"></script>

2、在vue中使用需要页面的DOM元素加载完成，在进行初始化引导页面

const initPageIntro = () => {
    // 引导图
    const allSteps = [
        {
            element: '#left-box', //这是添加引导的元素id
            title:"",
            intro: '自由清单能力展示', //这是引导提示内容
            position: 'right' //这是引导位置
        },
        {
            element: '#middle-top',
            title:"",
            intro: '',
            position: 'left'
        },
        {
            element: '#middle-bottom',
            title:"TOP10",
            intro: '',
            position: 'top'
        },
        {
            element: '#right-box',
            title:"",
            intro: '',
            position: 'left'
        },
    ]

    const curIntro = IntroJs()
    curIntro.setOptions({
        prevLabel: `上一步`,
        nextLabel: `下一步`,
        skipLabel: `跳过`,
        doneLabel: `完成`,
        tooltipPosition: `bottom` /* 引导说明框相对高亮说明区域的位置 */,
        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',
        exitOnEsc :true,
        steps: allSteps
    })
    curIntro.oncomplete(() => {
        // 点击结束按钮后执行的事件
        console.log(`oncomplete`)
    })
    curIntro.onexit(() => {
        // 点击跳过按钮后执行的事件
        console.log(`onexit`)
    })
    curIntro.onchange(() => {
        // 点击下一步执行的事件
        console.log(`onchange`)
    })
    curIntro.start()
}