Maui Blazor 快速引入driver.js分页引导页面

　　Driver.js是一个轻量级的Javascript类库，可用于产品导览、亮点、上下文帮助等，从而一步一步地导览用户快速熟悉产品功能。

 

1. 可以用CDN地址，但是建议最好CDN地址下载到本地内引入：

<script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css"/>

2. 编写对应的JS代码，需要先定义driver，从window中获取:

export function guideLine() {
    const driver = window.driver.js.driver;
    const driverObj = driver({
        smoothScroll: true,
        allowKeyboardControl: false,
        overlayOpacity: 0.1,
        nextBtnText: '下一步',
        prevBtnText: '上一步',
        doneBtnText:'完成',
        showProgress: true,
        onCloseClick: () => {
            driverObj.destroy();
        },
        steps: [
            {
                element: '#weeklyReport',
                popover: {
                    title: '周健康指标',
                    description: '查看每周健康达标情况',
                }
            },

            {
                element: '#manageReport', popover: {
                    title: '健康卡片',
                    description: '管理首页中需要显示的健康卡片',
                }
            },
            {
                element: '#healthReport', popover: {
                    title: '健康指标', description: '查看各项健康指标详细情况',
                }
            },
            {
                element: '#manageDevice', popover: {
                    title: '绑定设备',
                    description: '绑定蓝牙设备，智能上传健康数据',
                }
            },
        ]
    });

    driverObj.drive();
}

3. 在macOs里测试，在按下键盘后可能导致程序卡住，在GitHub上同样查看到相应的issue，先Mark下，看后续的情况:

https://github.com/kamranahmedse/driver.js/issues/452