您还可以在导览中使用异步步骤。当您想要从服务器加载一些数据，然后显示导览时，这非常有用。
driver.js
driver.js
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
const driverObj = driver({
showProgress: true,
steps: [
{
popover: {
title: 'First Step',
description: 'This is the first step. Next element will be loaded dynamically.'
// By passing onNextClick, you can override the default behavior of the next button.
// This will prevent the driver from moving to the next step automatically.
// You can then manually call driverObj.moveNext() to move to the next step.
onNextClick: () => {
// .. load element dynamically
// .. and then call
driverObj.moveNext();
},
},
},
{
element: '.dynamic-el',
popover: {
title: 'Async Element',
description: 'This element is loaded dynamically.'
},
// onDeselected is called when the element is deselected.
// Here we are simply removing the element from the DOM.
onDeselected: () => {
// .. remove element
document.querySelector(".dynamic-el")?.remove();
}
},
{ popover: { title: 'Last Step', description: 'This is the last step.' } }
]
});
driverObj.drive();
`注意`：通过覆盖`onNextClick`和`onPrevClick`钩子，您控制了驱动器的导航。这意味着用户将无法使用按钮进行导航，您将不得不调用`driverObj.moveNext()`或`driverObj.movePrevious()`来导航到下一个/上一个步骤。
您可以使用此功能来实现在步骤之间导航的定义逻辑。当您处理动态内容并希望根据某些逻辑高亮显示下一个/上一个元素时，这也很有用。
onNextClick和onPrevClick钩子可以在driver级别以及步骤级别进行配置。在driver级别配置时，您控制所有步骤的导航。在步骤级别配置时，您只控制特定步骤的导航。