driver.js

import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';
const driver = new Driver({
  className: 'scoped-class', // popover的类名
  animate: true,  // 是否开启切换动画
  opacity: 0.75,  //overlay遮罩层透明度
  padding: 10,    // 与内容边距
  allowClose: true, // 是否允许关闭
  overlayClickNext: false, // 是否点击遮罩层关闭
  doneBtnText: 'Done', // 完成关闭按钮文案
  closeBtnText: 'Close', // 关闭按钮文案
  nextBtnText: 'Next', // 下一步按钮文案
  prevBtnText: 'Previous', // 上一步按钮文案
  showButtons: false, // 是否显示控制按钮
  keyboardControl: true, // 是否允许键盘控制步骤
  scrollIntoViewOptions: {}, // We use `scrollIntoView()` when possible, pass here the options for it if you want any
  onHighlightStarted: (Element) {}, //  高亮进入
  onHighlighted: (Element) {}, //  高亮完成(但内容节点不可立即获取)
  onDeselected: (Element) {}, // Called when element has been deselected
  onReset: (Element) {},        // 当完成关闭时
  onNext: (Element) => {},      // 当下一步时
  onPrevious: (Element) => {},  // 当上一步时
});

driver.highlight({
  element: '#run-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    position: 'top', // can be `top`, `left`, `right`, `bottom`, `right-bottom`
  }
});

driver.defineSteps([
    {
      element: `#item-${name}`,
      popover: {
        title: ' ',
        description: `
            <div>1/3</div>
            <div>${desc}</div>
            <div class="d-flex jc-between al-center">
              <div data-btn="skip" ${isEnd && 'class="hide"'}>跳过</div>
              <div data-btn="next" ${isEnd && 'class="hide"'}>下一步</div>
              <div data-btn="close" ${!isEnd && 'class="hide"'}>完成</div>
            </div>`,
        className: 'popover-box',
        showButtons: false,
        position: position || 'right'
      }
    },
    ...
]);
driver.start();

// 自定义控制指引步骤
highlighted(driver) {
    // 延迟200ms
    const $popover = driver.popover.node;
    $popover.addEventListener('click', (e) => {
      const $target = e.target;
      // 点击跳过/完成
      if ($target.dataset['btn'] === 'skip' || $target.dataset['btn'] === 'close') {
        driver.reset();
        return;
      }
      // 点击下一个
      if ($target.dataset['btn'] === 'next') {
        driver.moveNext();
        return;
      }
    });
}