最近产品提出要在项目中添加新手指引功能，经过查询资料发现3个插件可行。
1.vue-tour组件
pulsardev.github.io/vue-tour/?f…
2.Intro.js
3.driver.js
codechina.csdn.net/mirrors/kam…
driver.js 可以根据参数自行配置自己想要的效果，和市面上的其他新手指引相似 也比较接近产品经理的需求 效果图如下：
使用过程中出现的坑：
由于新手指引要在2个页面使用 所有如果第二个页面没有完成或者跳过新手指南，通过浏览器返回上一个页面，则第二个页面的新手指南会出现在返回的页面上。 解决方法： 在beforeDestory生命周期里，把新手指引调用一个关闭的功能；（注意不是调用配置里的onReset的方法）
showNewUserHelp() {
this.controlDriver = new Driver({
className: 'scoped-class', // className to wrap driver.js popover
animate: true, // Animate while changing highlighted element
opacity: 0.5, // 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: '完成', // Text on the final button
closeBtnText: '跳过', // Text on the close button for this step
nextBtnText: '下一步', // Next button text for this step
prevBtnText: '上一步', // 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)',
description: '11。',
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);
});
},
beforeDestroy() {
if (!this.controlDriver) {
return;
}
this.controlDriver.options.onReset = null;
this.controlDriver.reset();
},
源码
/**
* 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();
}
}
2.当点击新手指引的高亮部分时，会出现高亮的文字不显示。 解决办法： 禁止高亮的地方点击，加上css禁止成为事件点击对象
.driver-highlighted-element {
pointer-events: none;
}
