Popover 按钮

你可以使用 showButtons 选项选择要在弹出窗口中显示的按钮。默认值为 ['next', 'previous', 'close']。

¥You can use the showButtons option to choose which buttons to show in the popover. The default value is ['next', 'previous', 'close'].

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

更改按钮文本

¥Change Button Text

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

¥You can also change the text of buttons using nextBtnText, prevBtnText and doneBtnText options.

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  nextBtnText: '—›',
  prevBtnText: '‹—',
  doneBtnText: '✕',
  showProgress: true,
  steps: [
    // ...
  ]
});

driverObj.drive();

事件处理程序

¥Event Handlers

你可以使用 onNextClick、onPreviousClick 和 onCloseClick 回调来实现用户点击“下一个”和“上一个”按钮时的自定义功能。

¥You can use the onNextClick, onPreviousClick and onCloseClick callbacks to implement custom functionality when the user clicks on the next and previous buttons.

请注意，配置这些回调时，按钮的默认功能将被禁用。你必须自行实现该功能。

¥Please note that when you configure these callbacks, the default functionality of the buttons will be disabled. You will have to implement the functionality yourself.

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

自定义按钮

¥Custom Buttons

你可以使用 onPopoverRender 回调函数添加自定义按钮。此回调在弹出窗口渲染之前调用。在下面的示例中，我们添加了一个自定义按钮，用于引导用户进入第一步。

¥You can add custom buttons using onPopoverRender callback. This callback is called before the popover is rendered. In the following example, we are adding a custom button that takes the user to the first step.

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