退出确认

您可以使用onDestroyStarted钩子在用户尝试退出导览时添加确认对话框或其他逻辑。在下面的示例中,退出时我们会检查是否还有导览剩余步骤,并在退出前请求确认。

退出确认

import { driver } from "driver.js";
    import "driver.js/dist/driver.css";
    
    const driverObj = driver({
      showProgress: true,
      steps: [
        { element: '#confirm-destroy-example', popover: { title: 'Animated Tour Example', description: 'Here is the code example showing animated tour. Let\'s walk you through it.', side: "left", align: 'start' }},
        { element: 'code .line:nth-child(1)', popover: { title: 'Import the Library', description: 'It works the same in vanilla JavaScript as well as frameworks.', side: "bottom", align: 'start' }},
        { element: 'code .line:nth-child(2)', popover: { title: 'Importing CSS', description: 'Import the CSS which gives you the default styling for popover and overlay.', side: "bottom", align: 'start' }},
        { popover: { title: 'Happy Coding', description: 'And that is all, go ahead and start adding tours to your applications.' } }
      ],
      // onDestroyStarted is called when the user tries to exit the tour
      onDestroyStarted: () => {
        if (!driverObj.hasNextStep() || confirm("Are you sure?")) {
          driverObj.destroy();
        }
      },
    });
    
    driverObj.drive();

`注意`:通过覆盖`onDestroyStarted`钩子,您需要负责调用`driverObj.destroy()`来退出导览。