Article directory
-
-
-
- 1. Rendering:
- 2. Implementation ideas:
- 3. Implementation code:
-
-
- 【1】Technical characteristics of Driver.js
- 【2】Install dependencies
- 【3】Code implementation
- 【4】Configure related parameters
-
-
-
1. Rendering:
2. Implementation ideas:
【Official website】https://driverjs.com/docs/installation
【npm】https://www.npmjs.com/package/driver.js
[Case] Transform driver.js to create a general-purpose novice guidance plug-in for business
[Case] Vue3 uses driver.js as a guide page, and the delineated content is blank. 3 solutions
[Case] Vue project implements new user navigation based on driverjs
3. Implementation code:
【1】Technical features of Driver.js
- Simple and lightweight: very easy to use, independent without dependencies, only 4kb in size
- Highly customizable: with a rich and powerful API, use it as needed
- Good interactive experience: supports animation transition, making the experience smooth and comfortable
- Highlight any content: Supports highlighting any dom element on the page
- Implement function introduction in a few simple steps: Create a great function introduction for our web application and have an excellent experience
- User-friendly: the guidance process can be controlled through the keyboard, which is very practical in power generation applications
- Browser compatibility is consistent: supports almost all browsers (including the famous IE)
【2】Installation dependencies
#npm installation npm i driver.js --save #yarn installation yarn add driver.js #Introduce dependencies into project components import Driver from 'driver.js'; import 'driver.js/dist/driver.min.css';
【3】Code implementation
In the project, you need to instantiate the driver object first, and then call the driver.defineSteps(array) method to implement the guidance steps.
Instantiate the driver object in the Vue file that needs to implement new user guidance. For example, in the main.vue file of the project, the driver.js usage is as follows:
<template>
<div class="dashboard-container">
<component :is="currentRole" />
</div>
</template>
<script>
import adminDashboard from './admin'
import Driver from 'driver.js' //Introduce driver.js dependency
import 'driver.js/dist/driver.min.css' //Introduce the style file of driver.js
export default {<!-- -->
name: 'Main',
components: {<!-- --> adminDashboard },
data() {<!-- -->
return {<!-- -->
currentRole: 'adminDashboard',
driver: null
}
},
mounted() {<!-- -->
// Instantiate the driver object
this.driver = new Driver()
// Pop-up prompt
this.$confirm('Do you want to enter the novice navigation?', 'Prompt', {<!-- -->
confirmButtonText: 'OK',
cancelButtonText: 'Cancel'
}).then(() => {<!-- -->
// Call the novice guidance method
this.onNavigation()
}).catch(() => {<!-- -->})
},
methods: {<!-- -->
onNavigation() {<!-- -->
// Novice guidance method
this.driver.defineSteps([
{<!-- -->
element: '#hamburger-container',
popover: {<!-- -->
title: 'Collapse button',
description: 'Click to collapse the left menu navigation',
position: 'right',
nextBtnText: 'Next',
prevBtnText: 'Previous step',
closeBtnText: 'Close'
}
},
{<!-- -->
element: '.panel-group',
popover: {<!-- -->
title: 'Statistics',
description: 'Statistics on the latest daily data',
position: 'bottom',
nextBtnText: 'Next',
prevBtnText: 'Previous step',
closeBtnText: 'Close'
}
},
{<!-- -->
element: '#home-line-chart',
popover: {<!-- -->
title: 'Statistics',
description: 'Statistics on the latest daily data',
position: 'bottom',
nextBtnText: 'Next',
prevBtnText: 'Previous step',
closeBtnText: 'Close'
}
},
{<!-- -->
element: '#transaction-table',
popover: {<!-- -->
title: 'Order Summary',
description: 'Summary platform sales order volume',
position: 'right',
nextBtnText: 'Next',
prevBtnText: 'Previous step',
closeBtnText: 'Close',
doneBtnText: 'Done'
}
}
])
// The start() method must be called to take effect
this.driver.start()
}
}
}
</script>
【4】 Configure related parameters
The parameters of the
defineSteps() method are array types, and the elements in the array are the guidance steps to be executed. step options include
{<!-- -->
element: '#item', // Selector for the element that needs to be highlighted
popover: {<!-- --> // Pop-up box content, if it is empty, the pop-up window will not be displayed.
className: 'popover-class', // Additional specified popover class name for the current step
title: 'Pop-up box title', //The title of the pop-up window
description: 'This step is for xxx', //The main content of the pop-up window
showButtons: false, // Whether to display control buttons at the bottom of the pop-up window
closeBtnText: 'Close', // Text of the close button
nextBtnText: 'Next', // Next button text of the current step
prevBtnText: 'Previous step', // Previous button text of the current step
doneBtnText: 'Done' // Last step completion button text
}
}
diver object configuration parameter description
const driver = new Driver({<!-- -->
className: 'scoped-class', //The class name that wraps the driver.js pop-up window
animate: true, // Whether to display animation when the highlighted element changes
Opacity: 0.75, //Background transparency (0 means only pop-up window and no mask)
padding: 10, // distance between element and edge
allowClose: true, // Whether to allow closing when the mask is clicked
overlayClickNext: false, //Whether to allow moving to the next step when clicking on the mask
doneBtnText: 'Done', //Text on the final button
closeBtnText: 'Close', // The text on the close button of the current step
nextBtnText: 'Next', //The text on the next button of the current step
prevBtnText: 'Previous', // The text on the previous button of the current step
showButtons: false, //Whether to display control buttons at the bottom
keyboardControl: true, // Whether to allow notification of keyboard control (escape is turned off, arrow keys are used for movement)
scrollIntoViewOptions: {<!-- -->}, // Options for the `scrollIntoView()` method
onHighlightStarted: (Element) {<!-- -->}, // Called when the element is about to be highlighted
onHighlighted: (Element) {<!-- -->}, // Called when the element is fully highlighted
onDeselected: (Element) {<!-- -->}, // Called when deselecting
onReset: (Element) {<!-- -->}, // Called when the mask is about to close
onNext: (Element) => {<!-- -->}, // Called when moving to the next step in any step
onPrevious: (Element) => {<!-- -->}, // Called when moving to the previous step in any step
});
The
driver object provides a series of powerful API methods through which developers can highly customize driver.js. The driver object API methods are as follows:
const isActivated = driver.isActivated; // Check whether the driver is activated driver.moveNext(); // Move to the next step in the list of steps driver.movePrevious(); // Move to the previous step in the step list driver.start(stepNumber = 0); // Start from the specified step driver.highlight(string|stepDefinition); // Highlight elements specified by query selector or step definition driver.reset(); //Reset mask and clear screen driver.hasHighlightedElement(); //Check whether there is a highlighted element driver.hasNextStep(); // Check if there is a next element that can be moved to driver.hasPreviousStep(); // Check if there is a previous element that can be moved to driver.preventMove();//Prevent the current move. Useful in "onNext" or "onPrevious" if you want to perform some asynchronous task and move to next step manually const activeElement = driver.getHighlightedElement(); // Get the currently highlighted element on the screen const lastActiveElement = driver.getLastHighlightedElement(); activeElement.getCalculatedPosition(); // Get the screen coordinates of the active element activeElement.hidePopover(); // Hide pop-up window activeElement.showPopover(); // Display pop-up window activeElement.getNode(); // Get the DOM element behind this element