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();