vue2实现新手指引功能

一、插件选择

1. Driver.js 是免费，修改父级的 z-index 层级实现遮罩，这样会有一个致命问题：当作用的新手引导元素父级存在定位是 fixed 的情况时，目标元素的层级始终无法超过白色高亮遮罩层。
2.  Intro.js：商用不免费，样式定制有限
3. vue tour:不支持黑色遮罩层，不支持高亮目标元素、还需要额外的在 template 里面引用标签
4. 最终选择：shepherd.js   官网：https://docs.shepherdpro.com/guides/install/

二、安装插件及配置

•  安装（npm、yarn、pnpm ）

• npm install shepherd.js --save

• 样式引入

• import 'shepherd.js/dist/css/shepherd.css';

•  配置
• 因实际需要全局，配置在app组件中，注：样式引入在插件引入之前 

 三、shepherd样式

1.自定义类（全局配置公共样式）

let tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-custom'
  }
});

2.单一步骤样式

在steps中的classes配置样式名称，自定义shepherd.less样式，写样式即可！ps：样式不生效，可能原因-原组件样式重叠覆盖、style优先级较高。

四、步骤文件配置

1.封装两个文件，一个js用来存放步骤配置，一个less存放样式 

2.公共tour配置（app文件）

tour = new Shepherd.Tour({
        useModalOverlay: true,
        defaultStepOptions: {
          classes: 'ps-shepherd-theme',
          scrollTo: false,
        },
        exitOnEsc: false,
      })

tips：

• useModalOverlay：步骤是否应该放在深色模态叠加层上方。如果为真，叠加层将在目标元素周围创建一个开口，以便它能够保持交互

• defaultStepOptions：默认配置步骤，公共样式配置

• scrollTo：显示此步骤时，应该滚动到该元素？

• exitOnEsc：禁止点击esc退出指引

3.步骤文件配置

1. 引入步骤配置文件js
2. 引入文件，可以对每一步骤做处理，再tour.addStep(step)，最后tour.start()

五、步骤配置

{
        id: 'shepherd-step-序号',
        title: '标题',
        text: '提示内容',
        advanceOn: { selector: '元素', event: 'click' },
        attachTo: { element: '元素', on: 'right' },
        canClickTarget: false,
        buttons: [
          {
            text: '下一步',
            action: function () {
              //其他操作
              tour.next()
            },
          },
        ],
      },

tips：id：唯一标识，可跳转到步骤

        advanceOn：交互功能，推进到下一步骤，适用于交互指引步骤

       attachTo：绑定元素，可绑定class、id建议唯一，若是不唯一，元素高亮不中，会导致指引断链

       canClickTarget：表格类高亮区域不可点击