preface

I talked about how to use this plug-in in VUE in another article, and the idea is basically the same, so I won’t go over it here.

Use intro.js in vUE projects

The official address

github

The official sample

steps

git clone

git clone [email protected]:mirrors/kamranahmedse/driver.js.git

npm install

npm install

index.js

HandleSkip is the same class as onClick

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

npm run build

Then package the NPM run build, which will add a dist folder to the source project

Replace dist file

In your own project, follow the official instructions to NPM I driver.js, then go to the \node_modules\driver.js folder and replace the folder with the folder with the same name dist you just packed

use

  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: "Next step".// Text on the final button
    closeBtnText: "Closed".// Text on the close button for this step
    nextBtnText: "Next step".// Next button text for this step
    prevBtnText: "Step up".// 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: 'Step one'.description: 'View the course. (1/7) '.position: 'bottom'
      }
    }
  ])
  driver.start();
Copy the code