异步游览

你还可以在游览中包含异步步骤。当你想从服务器加载一些数据然后显示导览时，这很有用。

¥You can also have async steps in your tour. This is useful when you want to load some data from the server and then show the tour.

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() 来导航到下一个/上一步。

¥Note: By overriding onNextClick, and onPrevClick hooks you control the navigation of the driver. This means that user won’t be able to navigate using the buttons and you will have to either call driverObj.moveNext() or driverObj.movePrevious() to navigate to the next/previous step.

你可以使用它来实现步骤间导航的自定义逻辑。当你处理动态内容并希望根据某些逻辑高亮下一个/上一个元素时，这也很有用。

¥You can use this to implement custom logic for navigating between steps. This is also useful when you are dealing with dynamic content and want to highlight the next/previous element based on some logic.

onNextClick 和 onPrevClick 钩子可以在驱动程序级别和步骤级别配置。在驱动程序级别配置时，你可以控制所有步骤的导航。在步骤级别配置时，你只能控制该特定步骤的导航。

¥onNextClick and onPrevClick hooks can be configured at driver level as well as step level. When configured at the driver level, you control the navigation for all the steps. When configured at the step level, you control the navigation for that particular step only.