推荐一个简单好用的新手引导库

前言

领导看到别的app上有新手引导，感觉对用户很友好，于是让我将这个功能加到我们自己的项目上，刚开始准备手撸css,但是感觉太繁琐，于是就问了度娘

效果

实现步骤

• 安装依赖

  yarn add driver.js || pnpm install deiver.js

• 引入 driver.js 库及其 css 文件

import "driver.js/dist/driver.css"; // 导入driver.js样式
import { driver } from "driver.js

• 准备好以上步骤就可以直接使用啦

const driverInfo = driver({
    showProgress: true, //是否在底部显示按钮
    // overlayColor: 'red', //设置引导遮罩颜色
    nextBtnText: "下一步", //下一步按钮文字
    prevBtnText: "上一步", //上一步按钮文字
    doneBtnText: "✕关闭", //完成按钮的文字
    closeBtnText: "关闭", // 关闭按钮的文字
    // allowClose: false, //强制用户浏览完成方可退出
    // keyboardControl: true, //  是否允许键盘控制 （ESC 关闭， 方向键 控制进度）
    // onHighlightStarted: (Element) {}, // 当节点高亮开始时触发回调
    // onHighlighted: (Element) {}, // 当节点已经高亮时触发回调
    // onDeselected: (Element) {}, // 当节点关闭高亮触发回调
    // onReset: (Element) {},        //当点击因应关闭时触发回调
    // onNext: (Element) => {},      // 下一步时触发回调
    // onPrevious: (Element) => {},  // 上一步触发回调
    steps: [
      {
        element: ".content",
        popover: {
          title: "活动名称",
          // description: "Description",
          side: "left",
          align: "center",
          onNextClick: () => {
            console.log("当前点击了第一步");
            driverInfo.moveNext(); //继续进行下一步
          },
          // onPrevClick:() =>{
          //   console.log("当前点击了第一步");
          //   driverInfo.movePrevious();
          // }
        },
      },
      {
        element: ".h",
        popover: {
          title: "备注",
          description: "用于提示用户!!!",
          onNextClick: () => {
            console.log("当前点击了第二步");
            driverInfo.moveNext(); //继续进行下一步
          },
          // onPrevClick:() =>{
          //   console.log("当前点击了第一步");
          // }
        },
      },
      {
        element: ".submit-box",
        popover: {
          title: "操作按钮",
          description: "按扭组合",
          onNextClick: () => {
            console.log("这是最后一步");
            driverInfo.moveNext(); //继续进行下一步
          },
          onCloseClick: () => {
            console.log("Close Button Clicked");
            driverInfo.destroy();
          },
        },
      },
    ],
    onDestroyStarted: () => {
      if (!driverInfo.hasNextStep() || confirm("Are you sure?")) {
        driverInfo.destroy();
      }
    },
  });
  driverInfo.drive();

总结

driver.js基于原生JavaScript开发的新用户引导库,使用起来非常简单，并且支持所有主要浏览器，相对于intro.js库来说更好用，因为driver.js不收任何费用，还有其他一些Api，详情请访问官方文档

官方文档入口：driver.employleague.cn/