退出时确认

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

¥You can use the onDestroyStarted hook to add a confirmation dialog or some other logic when the user tries to exit the tour. In the example below, upon exit we check if there are any tour steps left and ask for confirmation before we exit.

Confirm on Exit

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() 来退出游览。
¥Note: By overriding the onDestroyStarted hook, you are responsible for calling driverObj.destroy() to exit the tour.

介绍

示例

退出时确认