引导用户操作ShepherdJS的简单使用

更加具体的内容可以访问Shepherd的官网
这里只是简单介绍操作用法
获取Shepherd的相关资源

<link rel="stylesheet" href="dist/css/shepherd.css"/>
<script src="dist/js/shepherd.js"></script>

npm导入依赖的用法在npm官网搜索Shepherd也有介绍

用法:

1. 初始化Shepherd插件

// 初始化Shepherd并设置默认参数以及第一步引导
var shepherd = new Shepherd.Tour({
      // 设置默认引导配置
      defaultStepOptions: {
        // 引导左上角取消按钮图标的配置
        cancelIcon: {
          enabled: true, // 默认为true
        },
        // 指定引导盒子的类名, 用于后续自定义样式, 类名可叠加
        classes: 'custom-class-1 shepherd-class-2',
        // 滚动方式
        scrollTo: {
          behavior: 'smooth',
          block: 'center'
        }
      },
      // 添加第一步引导
      steps: [
        {
          // 设置引导标题
          title: '欢迎使用本产品',
          // 设置引导文本
          text: '这是第一个引导说明, 你好呀!朋友',
          // 设置指向的目标元素
          attachTo: {
            // 目标元素
            element: '.hero-welcome',
            // 引导DOM位于目标元素的方位
            on: 'bottom'
          },
          // 设置底部按钮
          buttons: [
            {
              action: function() {
                // Shepherd退出引导的方法
                return this.cancel();
              },
               // 颜色是否突出, 设置次要的颜色就不为突出
              secondary: true,
              text: 'Exit'
            },
            {
              action: function() {
                // Shepherd执行下一步引导的方法
                return this.next();
              },
              text: 'Next'
            }
          ],
          id: 'welcome'    // 用于Shepherd step的唯一标识符
        }
      ],
      // 是否背景突出引导, 默认是false
      useModalOverlay: true
    });

2. 添加引导流程

const element = document.createElement('p');
    element.innerText = '引导可以自定义DOM内容.';

    // 定义一系列引导步骤
    const steps = [
      {
        title: '第一步',
        // 可以直接写入html
        text: element,
        attachTo: {
          element: '.hero-including',
          on: 'bottom'
        },
        buttons: [
          {
            action: function() {
              return this.back();
            },
            secondary: true,
            text: 'Back'
          },
          {
            action: function() {
              return this.next();
            },
            text: 'Next'
          }
        ],
        id: 'step1'
      },
      {
        title: '第二步',
        text: '第二步内容',
        attachTo: {
          element: '.hero-example',
          on: 'right'
        },
        buttons: [
          {
            action: function() {
              return this.back();
            },
            secondary: true,
            text: 'Back'
          },
          {
            action: function() {
              return this.next();
            },
            text: 'Next'
          }
        ],
        id: 'step2'
      },
      {
        title: '第三步',
        text: '第三步内容.',
        attachTo: {
          element: '.hero-example',
          on: 'left'
        },
        buttons: [
          {
            action: function() {
              return this.back();
            },
            secondary: true,
            text: 'Back'
          },
          {
            action: function() {
              return this.next();
            },
            text: 'Next'
          }
        ],
        id: 'step3'
      }
    ];

    // 将定义好的引导添加进来
    shepherd.addSteps(steps);

3. shepherd允许反复添加步骤

shepherd.addStep({
      title: '后续添加',
      text: '这是后续添加的步骤',
      // 当没有指定依附的元素时, shepherd会选择默认显示在屏幕的中间
      buttons: [
        {
          action: function() {
            return this.back();
          },
          secondary: true,
          text: 'Back'
        },
        {
          action: function() {
            return this.next();
          },
          text: 'Next'
        }
      ],
      id: 'step4'
    });

shepherd中cancel方法表达,直接退出引导,结束引导的意思, 而当调用next方法发现没有定义的step时,也会隐式调用cancel方法,退出引导

4. 启动
   定义好的引导, 启动也很简单, 调用start方法即可

shepherd.start();