vue3项目开发新手指引使用driver.js

1.安装 driver.js

npm install driver.js

2.创建新用户引导工具drivers.js，引入工具和样式表

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

3.创建登录后的第一个页面 stepone.vue,给需要引导的位置加id属性 “step01“ 和 “step02”

<div class="personal-menu" id="step01">
...
</div>

 <!-- 新手指引图片 -->
 <img src="/images/common/step2.jpg" class="step2-img" id="step02" v-if="showStepImg" />

watch(

    () => noceterfiyImg.value,

    (newVal) => {

        showStepImg.value = newVal

    },

);

4.在drivers.js文件中创建前两步引导，根据   element: '#step01' 和  '#step02', 绑定元素，因为前两步在同一个页面，所有写到同一个方法的steps数组中。

const showFirstTips = () => {
    const store = useMockStore();
    const router = useRouter();
    const driverObj = driver({
        allowClose: false, // 点击遮罩层是否关闭
        prevBtnText: "上一步",
        nextBtnText: "下一步",
        doneBtnText: "跳转",
        closeBtnText: "关闭",
        stagePadding: 5,
        disableActiveInteraction: true,
        steps: [
            {
                element: '#step01', // 绑定元素
                popover: {
                    title: '添加认证',
                    description: '当前账号未认证,是否开启认证？点击“个人中心”，下拉菜单内容',
                    side: 'left',
                    align: 'start',
                },
                
            },
            {
                element: '#step02',
                popover: {
                    title: '跳转页面',
                    description: '进入个人中心，跳转认证页面',
                    side: 'bottom',
                    align: 'start',
                    onNextClick: () => {
                        store.setNoceterfiyImg(false)
                        router.push('/personalConfig/personalCertification?id=0')
                        // .. and then call
                        driverObj.moveNext();
                    },
                },
            },
        ],
    });
    driverObj.drive();
};

 点击下一步跳转至第二步

 点击跳转，调用 onNextClick，隐藏第二步图片的显示，跳转至认证页面。

5.创建认证页面 certify.vue页面，并创建元素id属性step03

<section
            class="person-center-box"
            v-loading="loading"
            element-loading-custom-class="loadingZIndex"
            id="step03"
        >
...
</section>

在该页面监听当前是否第一次登录，是第一次登录显示最后一步引导。

import { showSecondTips } from '@/utils/drivers.js';

const initCertifiyPage = () => {
    const firstLogin = store.fetchIsFirstLogin();
    if (firstLogin) {
        setTimeout(() => {
            showSecondTips();
        }, 500);
    }
}
onMounted(() => {
    nextTick(() => {
        initCertifiyPage()
    })
})

6.在drivers.js文件中创建最后一步引导，根据   element: '#step03', 绑定元素

const showSecondTips = () => {
    const store = useMockStore();
    const driverObj = driver({
        allowClose: false, // 点击遮罩层是否关闭
        prevBtnText: "上一步",
        nextBtnText: "下一步",
        doneBtnText: "我知道了",
        closeBtnText: "关闭",
        stagePadding: 5,
        disableActiveInteraction: true,
        steps: [
            {
                element: '#step03',
                popover: {
                    title: '内容填写',
                    description: '在内容区，完成认证流程',
                    side: 'bottom',
                    align: 'start',
                    onNextClick: () => {
                        store.setIsFirstLogin(false)
                        // .. and then call 
                        driverObj.moveNext();
                    },
                },
            },
                
        ],
        onHighlightStarted: function (element) {  
            // 在步骤开始前滚动到目标元素  
            element && element.scrollIntoView({ block: 'center', behavior: 'smooth' }); // 滑到对话框中间
        }
    });
    driverObj.drive();
};

页面显示如下，点击我知道了，结束引导。