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

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

 

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

?

1 2	<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中获取:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

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