vue-tour implements user guidance function

Vue version: vue2; if there are some compatibility issues with vue3, there seems to be a solution in the issue of github, you can check it yourself.

Generally, if you use it in a vue project built with vue-cli, you can refer to the doc on the official website:  https://github.com/pulsardev/vue-tour/wiki https://github.com/pulsardev/vue-tour/wiki or

https://pulsar.gitbooks.io/vue-tour/content/ https://pulsar.gitbooks.io/vue-tour/content/ can’t open the Internet by itself.

The point is that generally the effect we want to achieve cannot be so simple, it needs to be more beautiful, such as this effect:

 

Here you can refer to the article written by Zhihu brother:

Vue-tour usage record- Know what is vue-tourvue-tour is a Vue-specific guide page component The guide page will tell the user what this piece is and then complete the guide step by step. Generally, the guide page is extracted through the border Or use another boot component (forgot) Then since we use Vue to develop, we can just use v... https://zhuanlan.zhihu.com/p/462303172 It should be noted that the step in the definition of v-tour does not use v-for Loop, the reason is mentioned in the issue,

So this old man wrote multiple templates and then used v-if to control whether to display.

However, I feel that the cycle is still simple, so I copied the official example and changed it slightly:

<v-step
	v-if="tour.currentStep === index"
	v-for="(step, index) of tour.steps"
	:key="index"
	:step="step"
	:previous-step="tour.previousStep"
	:next-step="tour.nextStep"
	:stop="tour.stop"
	:is-first="tour.isFirst"
	:is-last="tour.isLast"
	:labels="tour.labels"
	:highlight="tour.highlight"
	:number="index"
>
	<template>
		<div slot="actions">
			<button v-if="index>0" @click="tour.previousStep" class="v-step__button v-step__button_first">上一步</button>
			<button v-if="index<steps.length-1" @click="tour.nextStep" class="v-step__button">我知道了</button>
			<button v-if="index==steps.length-1" @click="tour.skip" class="v-step__button">完成引导</button>
		</div>
	</template></v-step
>

 Another problem is that v-tour itself does not support offset, and it is displayed in the center according to the binding element, sometimes it cannot achieve the effect we want.

It is mentioned in the issues to use offset to do the offset, but I practiced it and found that it doesn't work. Some people can... very confused. .

To solve this problem, I manually modify the css. When loading for the first time, modify it after loading

/*用户指引：修改用户指引首个指引的位置*/
changeFisrtGuidePosition() {
	//获取v-tour的首个子节点 即用户指引弹窗 v-setp-xxxx
	let FirstGuideDom = $(".v-tour").children().get(0);
	//由于绑定的元素为侧边栏，侧边栏高度比较高，js插件使弹窗上下居中展示，因此指向的位置不对，需要人为修改一下
	//v-tour官方文档中并没有给出设置偏移量或者 指定高度的可选参数
	FirstGuideDom.style.transform = "translate(60px, 64px)";
	//这段代码在setp为0的时候需要调用，其他时候不调用即可
},

 Put it in the callback function to call, because only the first v-tour of mine does not display well and needs to manually set the offset, so

//用户指引回调函数
myCallbacks: {
	onStart: this.isReady,
	onPreviousStep: this.isPreviousStep,
},

call onStart once, and judge whether the currentStep is 1 after the previousStep, and call it again if it is 1.

In addition, I also encountered a BUG in the process to share:

Right now:

vue.js:525 TypeError: _this3.customCallbacks.onNextStep is not a function
    at VM353 vue-tour.umd.js:5247
    at new Promise (<anonymous>)
    at process (VM353 vue-tour.umd.js:5246)
    at _callee3$ (VM353 vue-tour.umd.js:5281)
    at tryCatch (VM353 vue-tour.umd.js:2179)
    at Generator.invoke [as _invoke] (VM353 vue-tour.umd.js:2409)
    at Generator.next (VM353 vue-tour.umd.js:2234)
    at asyncGeneratorStep (VM353 vue-tour.umd.js:4813)
    at _next (VM353 vue-tour.umd.js:4835)
    at VM353 vue-tour.umd.js:4842

 After detailed investigation...it was found that the person who wrote this project buried a pit...

Since here is vue introduced directly in html, without using vue-cli, webpack, etc., when defining data at that time, it was defined as:

The correct definition should be: 

 This is what caused the error.