背景介绍

最近项目中要用到新手引导，在网上找了一圈，发现了这个比较不错的插件driver.js 于是乎，基于这个插件写了一个demo来测试下好不好用。

插件使用

插件有完整的文档，就不做具体介绍了，也可以查看文档中demo。

插件在项目中的封装

    // 先引入插件
    import Driver from 'driver.js';
    import 'driver.js/dist/driver.min.css';
    
    // 写一个方法封装下
     public createGuide(steps, callbacks) {
        const driver = new Driver({
          allowClose: false,
          doneBtnText: '完成',
          closeBtnText: '忽略提示',
          nextBtnText: '下一步',
          prevBtnText: '上一步',
          opacity: 0.2,
          stageBackground: 'transparent',
          onReset: (ele) => {
            if (callbacks) {
              const steps: any[] = driver.getSteps()
              // eslint-disable-next-line eqeqeq
              if (steps[steps.length - 1] === ele && callbacks.onDone) {
                callbacks.onDone(ele)
              } else if (callbacks.onReset) {
                callbacks.onReset(ele)
              }
            }
          }
        })
        driver.defineSteps(steps)
        return driver
      }
    // 初始化使用
    public initDriver() {
        const driver = this.createGuide([
        {
          element: '#driver1',
          popover: {
            title: '💡',
            description: '在此处编辑界面名称',
            position: 'bottom',
          },
        },
        {
          element: '#driver2',
          popover: {
            title: '💡',
            description: '在此处选择界面布局',
            position: 'bottom',
          },
        },
        {
          element: '#driver3',
          popover: {
            title: '💡',
            description: '根据选择的布局设置每行的商品陈列数量',
            position: 'right',
          },
        },
        {
          element: '#driver4',
          popover: {
            title: '💡',
            description: '设置界面背景色',
            position: 'right',
          },
        },
        {
          element: '#driver5',
          popover: {
            title: '💡',
            description:
              '将需要投放的广告和需要陈列的商品图片拖入到对应的布局区域',
            position: 'left',
          },
        },
        {
          element: '#driver6',
          popover: {
            title: '💡',
            description: '点击广告位可对轮播进行设置',
            position: 'top',
          },
        },
        {
          element: '#driver7',
          popover: {
            title: '💡',
            description:
              '将商品价签或活动标签拖动到陈列框内会自动吸附到相应位置，在右侧设置内容',
            position: 'right',
          },
        },
      ], { onReset: this.finishedGuide.bind(this), onDone: this.finishedGuide.bind(this) })
      
      // Start the introduction
      driver.start()
    }

遇到的问题

在使用过程中，由于页面会出现滚动条，比如第一个点击下一步到达第二个后，再点击上一步，会出现第一个被遮挡，显示不出来的问题，具体画图所示

demo地址

gitee地址