Recently, the product proposed to add the novice guide function in the project, and three plug-ins were found to be feasible after consulting the information.

1. The vue – tour components

pulsardev.github.io/vue-tour/? F…

2.Intro.js

www.dowebok.com/demo/2013/3…

3.driver.js

Codechina.csdn.net/mirrors/kam…

Driver.js can customize the desired effect according to the parameters, which is similar to other beginner guidelines on the market and is close to the requirements of product managers as follows:

Pits in use:

Since the beginner’s guide is used on two pages, if the second page is not completed or the beginner’s guide is skipped and the browser returns to the previous page, the beginner’s guide on the second page will appear on the returned page. Workaround: In the beforeDestory life cycle, call a closed function for the novice guide; (Note that the onReset method is not called in the configuration.)

showNewUserHelp() { this.controlDriver = new Driver({ className: 'scoped-class', // className to wrap driver.js popover animate: true, // Animate while changing highlighted element opacity: Background opacity (0 means only popovers and without overlay) padding: 0, // 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: 'done ', // Text on the final button closeBtnText: 'Skip ', // Text on the close button for this step nextBtnText:' Next ', // Next button Text for this step prevBtnText: 'Previous button ', // Previous button text for this step showButtons: true, // Do not show control buttons in footer keyboardControl: false, // Allow controlling through keyboard scrollIntoViewOptions: {}, // We use `scrollIntoView()` 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) => { this.updateProfile(); }, // when overlay is about to be cleared onNext: (Element) => { }, // Called when moving to next step on any steps onPrevious: (Element) => { }, // Called when moving to next step on any step }); This. ControlDriver. DefineSteps ([{element: '# item0' popover: {title: '11 (1/4), the description:' 11. 'the position: 'bottom',},}, {element: '#item1', popover: {title: '22 (2/4)', description: '22 ', position: 'bottom', }, }, { element: '#item2', popover: { title: '33 (3/4)', description: '33', position: 'bottom', }, }, { element: '#item3', popover: { title: '44(4/4)', description: '44', position: 'bottom', }, }, ]); this.controlDriver.start(); }, updateProfile() { const params = { isNavigationGuide: true, }; updateUserInfo(params) .then((res) => { this.setProfile(res.data); }); },Copy the code
beforeDestroy() { if (! this.controlDriver) { return; } this.controlDriver.options.onReset = null; this.controlDriver.reset(); },Copy the code

The source code

/** * Resets the steps if any and clears the overlay * @param {boolean} immediate * @public */ reset(immediate = false) { this.currentStep = 0; this.isActivated = false; this.overlay.clear(immediate); } /** * Removes the overlay and cancel any listeners * @public */ clear(immediate = false) { // Callback for when overlay is about to be reset if (this.options.onReset) { this.options.onReset(this.highlightedElement); } // Deselect the highlighted element if any if (this.highlightedElement) { const hideStage = true; this.highlightedElement.onDeselected(hideStage); } this.highlightedElement = null; this.lastHighlightedElement = null; if (! this.node) { return; } // Clear any existing timers and remove node this.window.clearTimeout(this.hideTimer); if (this.options.animate && ! immediate) { this.node.style.opacity = '0'; this.hideTimer = this.window.setTimeout(this.removeNode, ANIMATION_DURATION_MS); } else { this.removeNode(); }}Copy the code

2. When you click on the highlighted part of the newbie guide, the highlighted text will not be displayed. Solution: Disallow highlighted clicks, plus CSS disallows being event click objects

.driver-highlighted-element {
  pointer-events: none;
}

Copy the code