Astro driver.js
入门介绍
安装 基本用法 配置 API 参考 定制主题 迁移到 1.x
示例
动态导览 静态导览 自定义弹出框 显示进度 异步导览 退出确认 禁止关闭 定制彩色遮罩层 弹出框位置 弹出框按钮 简单高亮

弹出框按钮

您可以使用`showButtons`选项来选择在弹出框中显示哪些按钮。默认值是`['next', 'previous', 'close']`。

注意：当使用`highlight`方法来高亮单个元素时，只显示关闭按钮。然而，您可以使用`showButtons`选项来显示其他按钮。但是，这些按钮不会执行任何操作。您需要使用`onNextClick`和`onPreviousClick`回调来实现功能。 

import { driver } from "driver.js";
    import "driver.js/dist/driver.css";
    
    const driverObj = driver({
      showButtons: [
        'next',
        'previous',
        'close'
      ],
      steps: [
        {
          element: '#first-element',
          popover: {
            title: 'Popover Title',
            description: 'Popover Description'
          }
        },
        {
          element: '#second-element',
          popover: {
            title: 'Popover Title',
            description: 'Popover Description'
          }
        }
      ]
    });
    
    driverObj.drive();

修改按钮文案

您还可以使用`nextBtnText`、`prevBtnText`和`doneBtnText`选项来更改按钮的文本。

修改按钮文案

import { driver } from "driver.js";
    import "driver.js/dist/driver.css";
    
    const driverObj = driver({
      nextBtnText: '—›',
      prevBtnText: '‹—',
      doneBtnText: '✕',
      showProgress: true,
      steps: [
        // ...
      ]
    });
    
    driverObj.drive();

事件处理器

您可以使用`onNextClick`、`onPreviousClick`和`onCloseClick`回调来实现用户点击下一步、上一步以及关闭按钮时的自定义功能。

请注意，当您配置这些回调时，按钮的默认功能将被禁用。您需要自己实现功能。 

import { driver } from "driver.js";
    import "driver.js/dist/driver.css";
    
    const driverObj = driver({
      onNextClick:() => {
        console.log('Next Button Clicked');
        // Implement your own functionality here
        driverObj.moveNext();
      },
      onPrevClick:() => {
        console.log('Previous Button Clicked');
        // Implement your own functionality here
        driverObj.movePrevious();
      },
      onCloseClick:() => {
        console.log('Close Button Clicked');
        // Implement your own functionality here
        driverObj.destroy();
      },
      steps: [
        // ...
      ]
    });
    
    driverObj.drive();

自定义按钮

您可以使用`onPopoverRender`回调添加自定义按钮。这个回调在弹出框渲染之前被调用。在以下示例中，我们添加了一个自定义按钮，该按钮将用户带到第一步。

import { driver } from "driver.js";
    import "driver.js/dist/driver.css";
    
    const driverObj = driver({
      // Get full control over the popover rendering.
      // Here we are adding a custom button that takes
      // user to the first step.
      onPopoverRender: (popover, { config, state }) => {
        const firstButton = document.createElement("button");
        firstButton.innerText = "Go to First";
        popover.footerButtons.appendChild(firstButton);
    
        firstButton.addEventListener("click", () => {
          driverObj.drive(0);
        });
      },
      steps: [
        // ..
      ]
    });
    
    driverObj.drive();