vue中使用driver.js做页面分页引导

this.$nextTick(() => {
  this.initDriverPlugin();
});

initDriverPlugin () { // 初始化引导页
  this.Driver = new Driver({
    className: 'driver-popover',
    doneBtnText: '知道了', // 结束按钮的文字
    allowClose: false, // 是否可以通过点击遮罩层关闭指引
    stageBackground: '#ffffff', // 突出显示元素的背景颜色
    nextBtnText: '下一步', // 下一步按钮的文字
    prevBtnText: '上一步', // 上一步按钮的文字
    closeBtnText: '', // 关闭按钮的文字
    keyboardControl: false, // 是否允许键盘操控
    xCloseButton: false, // 将关闭按钮作为X放在弹出
    onReset: (Element) => {
      this.$store.commit('chgDriverState', false);
    }
  });
  // 判断是否需要打开新手指引
  if (this.openDriver) {
    this.$refs.tableList.$refs.tableList.$nextTick(() => {
      this.steps[1].onNext = () => {
        this.Driver.preventMove();
        if (this.$refs.tableList.$refs.tableList.data.length === 0) {
          this.steps.length = 3;
        }
        this.Driver.defineSteps(this.steps);
        this.Driver.start(2);
      };
      this.steps[2].onNext = () => {
        if (this.$refs.tableList.$refs.tableList.data.length === 0) {
          this.steps.length = 3;
          this.Driver.reset(); // 如果下一步数据清空，则reset
          // this.curSteps = 0;
          // return;
        }
        this.Driver.preventMove();
        this.Driver.defineSteps(this.steps);
        this.Driver.start(3);
        // this.curSteps = 3;
      };
      this.Driver.defineSteps(this.steps);
      this.Driver.start();
    });
  }
},

export default {
  data () {
    return {
      Driver: '',
      openDriver: false,
      steps: [
        {
          element: '#guide-one',
          popover: {
            title: ' ',
            description: '描述1',
            position: 'right'
          }
        },
        {
          element: '#guide-two',
          popover: {
            title: ' ',
            description: '描述2',
            position: 'left'
          },
          padding: 5,
        },
        {
          element: '.el-table__fixed-right .el-table__fixed-header-wrapper table .guide-three i',
          popover: {
            title: ' ',
            description: '描述3',
            position: 'left',
          }
        },
        {
          element: '.el-table__body-wrapper',
          popover: {
            title: ' ',
            description: '描述4',
            position: 'top',
          }
        }
      ]
    };
  },
}

上效果图

原文参考