前言

对于如何在vue中使用这种插件，我在另一篇文章中提到过，思路大体是一样的，这边就不再赘述了。

在vue项目中使用 Intro.js

官方地址

github

官方示例

操作步骤

git clone

git clone git@codechina.csdn.net:mirrors/kamranahmedse/driver.js.git

npm install

npm install

index.js

handleSkip与onClick同级

  handleSkip () {
    const currentStep = this.steps[this.currentStep];
    currentStep.options.onSkip(this.overlay.highlightedElement);
  }

npm run build

然后打包 npm run build， 打包以后源码项目会多一个dist文件夹

替换dist文件

在自己的项目，按照官方的指示步骤npm i driver.js，然后找到\node_modules\driver.js文件夹，将文件夹下面的同名dist文件夹替换成自己刚才打包的文件夹

使用

  const driver = new Driver({
    animate: true, // Animate while changing highlighted element
    opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
    // padding: 10,    // Distance of element from around the edges
    allowClose: false, // Whether clicking on overlay should close or not
    overlayClickNext: false, // Should it move to next step on overlay click
    doneBtnText: "下一步", // Text on the final button
    closeBtnText: "关闭", // Text on the close button for this step
    nextBtnText: "下一步", // Next button text for this step
    prevBtnText: "上一步", // Previous button text for this step
    showButtons: true, // Do not show control buttons in footer
    keyboardControl: false, // Allow controlling through keyboard (escape to close, arrow keys to move)
    scrollIntoViewOptions: {}, // We use `scrollIntoView()` when possible, pass here the options for it if you want any
    onHighlightStarted: Element => {}, // Called when element is about to be highlighted
    onHighlighted: Element => {}, // Called when element is fully highlighted
    onDeselected: Element => {}, // Called when element has been deselected
    onReset: Element => { }, // Called when overlay is about to be cleared
    onNext: Element => {}, // Called when moving to next step on any step
    onPrevious: Element => {}, // Called when moving to next step on any step
    onSkip: Element => {
      console.log("onSkip");
    }
  });
  driver.defineSteps([
    {
      element: '#guide-step1',
      popover: {
        title: '步骤一',
        description: '查看课程。(1/7)',
        position: 'bottom'
      }
    }
  ])
  driver.start();