vue3.0使用intro.js实现新手引导功能

我们在浏览一些网站是，经常看到如下内容，这就是新手引导功能，让我们能够更快的了解该网站的功能。

那么，这个功能要如何实现呢？
今天我们就用intro.js这个插件来实现：

第一步：安装依赖

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>

以上就是实现网页引导的主要步骤