操作指引插件boarding.js推荐

boarding是一个比driver.js更灵活更好用的一个插件，是driver的升级版。它的使用方法和driver几乎一样，所以用过driver的人都可以很快的适应boarding。这里给大家简单推荐下~

参考：boarding.js - npm (npmjs.com)

0.安装使用

 npm i boarding.js

使用举例

import { Boarding } from "boarding.js";

// 样式引入
import "boarding.js/styles/main.css";
import "boarding.js/styles/themes/basic.css";

const boarding = ref<Boarding>(new Boarding(...));

1.支持执行异步操作

比如在执行上下一步操作时，我们希望可以对它的行为进行监听拦截，并在执行上下一步操作之前执行一些异步请求操作等，这时我们就可以在onNext和onPrevious里这样写

onNext: () => {
      // Prevent moving to the next step
      boarding.preventMove();

      // Perform some action or create the element to move to
      // And then move to that element
      setTimeout(() => {
        boarding.continue();
      }, 4000);
    },

这里的preventMove是暂停接下来的指引操作，接着你可以写代码执行自己的操作了，执行完成后，再调用continue，那么它就会进行下一步或上一步的操作了。

 2.支持步骤自定义

可以先新建一个空对象，然后再自己添加步骤

const boarding = new Boarding();

// Define the steps for introduction
boarding.defineSteps([
  {
    element: "#first-element-introduction",
    popover: {
      className: "first-step-popover-class",
      title: "Title on Popover",
      description: "Body of the popover",
      prefferedSide: "left",
    },
  },
。。。
]);

也可以先定好一些总的样式规则，再到步骤时进行细化

new Boarding({
      animate: true, // 动效
      allowClose: false,
      keyboardControl: false, 
      overlayClickNext: false,
      opacity: 0.5,
      padding: 10,
      doneBtnText: `完成`,
      closeBtnText: `关闭`,
      nextBtnText: `下一步`,
      prevBtnText: `上一步`,
      scrollIntoViewOptions: {
        behavior: "smooth",
        block: "center",
      },
。。。
});

3.后期修改指引参数

修改操作指引标题

找到需要修改的操作指引步骤step

step.popover.title = '换个标题';

修改操作指引描述

step.popover.description = '换个描述，abaabaaba。。。';

修改上下一步方法

step.onPrevious = (...params) => {...};
step.onNext = next;

4.手动进行指引操作

跳转到第7步

boarding.start(7)

跳转上一步

boarding.previous();

跳转下一步

boarding.next();

停暂指引操作

boarding.preventMove();

继续指引操作

boarding.continue();

结束指引

boarding.reset();

更多详细内容可以参考其官方文档或GitHub、npm地址。