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 } };