Page distribution guide for beginners (driver.js)

Page distribution guide (driver.js)

Recently, there is a need – to provide novice guidance, provide guidance and help when new users enter the page, and quickly familiarize users with the functions of the page. However, in order not to affect the existing page logic and style too much, I found a very good one. Tools used driver.js: Driver.js is a powerful and highly customizable new user onboarding library developed based on native JavaScript. It has no dependencies and supports all major browsers !!! Emphasis: it can be used on both PC and mobile terminals

Official website: driver.js

1. Installation

yarn

yarn add driver.js

npm

npm install driver.js --save

2. Introduction

import {<!-- --> driver } from "driver.js";
import "driver.js/dist/driver.css";

3. Use

Provide continuous guidance

data() {<!-- -->
    return {<!-- -->
      steps: [
        {<!-- -->
          element: '.dialog',
          popover: {<!-- -->
            // side:'bottom',
            // align:'start',
            title: "dialog",
            description: 'This is a dialog',
            position: 'top',
            onNextClick:this.nextStep
          }
        },
        {<!-- -->
          element: '#step1',
          popover: {<!-- -->
            title: "one",
            description: 'This is one',
            position: 'top'
          }
        },
        {<!-- -->
          element: '#step2',
          popover: {<!-- -->
            title: "two",
            description: 'This is two',
            position: 'right'
          }
        },
        {<!-- -->
          element: '#step3',
          popover: {<!-- -->
            title: "three",
            description: 'This is three',
            position: 'bottom'
          }
        },
        {<!-- -->
          element: '#step4',
          popover: {<!-- -->
            title: "step4",
            description: 'This is three',
            position: 'bottom'
          }
        },
        {<!-- -->
          element: '#child',
          popover: {<!-- -->
            title: "child",
            description: 'This is three',
            position: 'bottom'
          }
        },
        {<!-- -->
          element: '#hello',
          popover: {<!-- -->
            title: "hello",
            description: 'This is hello',
            position: 'bottom'
          }
        },
      ]
    }
  },
this.driver = new driver({<!-- -->
        // allowClose: false,
        // popoverClass: 'driverjs-theme',
        showProgress:true,
        progressText:'{<!-- -->{current}}/{<!-- -->{total}}',
        doneBtnText: 'Done', // Text of the end button
        animate: true, // animation
        stageBackground: '#ffffff', // Background color of highlighted elements
        nextBtnText: 'Next', // Next button text
        prevBtnText: 'Previous', // Text of the previous button
        closeBtnText: 'Close', // Text of the close button
        // overlayColor:'#f40',
        steps: this.steps,
        stagePadding:10,
        onCloseClick:() => {<!-- -->
          console.log('Close Button Clicked');
          // Implement your own functionality here
          this.driver.destroy();
        },
      })
      this.driver.drive()

Effect

4. API method

const driver = new Driver(driverOptions);

const isActivated = driver.isActivated; //Checks if the driver is active or not
driver.moveNext(); // Moves to next step in the steps list
driver.movePrevious(); // Moves to previous step in the steps list
driver.start(stepNumber = 0); // Starts driving through the defined steps
driver.highlight(string|stepDefinition); // highlights the element using query selector or the step definition
driver.reset(); //Resets the overlay and clears the screen
driver.hasHighlightedElement(); //Checks if there is any highlighted element
driver.hasNextStep(); // Checks if there is next step to move to
driver.hasPreviousStep(); // Check if there is a previous element that can be moved to. Checks if there is previous step to move to

driver.preventMove();//Prevent the current move. Prevents the current move. Useful in `onNext` or `onPrevious` if you want to
// perform some asynchronous task and manually move to next step



const activeElement = driver.getHighlightedElement(); // Gets the currently highlighted element on screen
const lastActiveElement = driver.getLastHighlightedElement();
activeElement.getCalculatedPosition(); // Gets screen co-ordinates of the active element
activeElement.hidePopover(); // Hide the popover
activeElement.showPopover(); // Show the popover Show the popover

activeElement.getNode(); // Gets the DOM Element behind this element Gets the DOM Element behind this element
You can use a variety of options to achieve everything you want. You can use a variety of options to achieve whatever you may want.

5. steps option

const stepDefinition = {<!-- -->
  element: '#some-item', // The query selector character or Node that needs to be highlighted. Query selector string or Node to be highlighted
  popover: {<!-- --> // There will be no popover if empty or not given.
    className: 'popover-class', // In addition to the general class name in the Driver options, you can also specify the class name to wrap this specific step popover in addition to the general className in Driver options
    title: 'Title', // Title on the popover
    description: 'Description', // Body of the popover
    showButtons: false, // Whether to display control buttons at the bottom Do not show control buttons in footer
    closeBtnText: 'Close', // Text on the close button for this step
    nextBtnText: 'Next', // Next button text for this step
    prevBtnText: 'Previous', // Previous button text for this step
  }
};