vue-tour 实现用户指引功能

vue版本：vue2；如果使用vue3有一些兼容问题，github的issue中似乎有解决方法，可以自行查阅。

一般用vue-cli搭建的vue项目里面使用的话参考官网的doc就可以了： https://github.com/pulsardev/vue-tour/wikihttps://github.com/pulsardev/vue-tour/wiki或者

https://pulsar.gitbooks.io/vue-tour/content/https://pulsar.gitbooks.io/vue-tour/content/打不开自行科学上网。

重点在于一般我们要实现的效果不能这么简陋，需要比较好看才行，例如这种效果：

这里可以参考知乎老哥写的文章：

vue-tour使用记录 - 知乎什么是vue-tourvue-tour 是Vue专属的引导页组件引导页就是会告诉用户这块是什么东东然后一步一步的完成引导一般引导页都是通过border来抠出来的或者使用另一个引导组件(忘了) 那我们既然用Vue开发正好可以用v…https://zhuanlan.zhihu.com/p/462303172需要注意，其中定义v-tour里面step没有使用v-for循环，原因在issue中有提到，

扫描二维码关注公众号，回复： 16308899 查看本文章

所以这位老哥是写了多个template 再用v-if去控制是否显示。

不过我感觉还是循环来的简单，于是照抄的官方示例，稍微改了下：

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

另外还有一个问题就是，v-tour本身是不支持偏移量的，并且是按照绑定元素居中显示，有时候达不到我们想要的效果，

issues中有提到使用offset来做偏移，但是我实践了下发现不行，有的人可以...很疑惑。。

解决这个问题，我是手动去修改的css，首次加载的时候，加载后修改

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

放在回调函数中去调用，由于我的只有第1个v-tour显示效果不佳需要人为设置偏移量，所以

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

onStart调用一次，并且在previousStep后判断一下 currentStep是否为1，为1则再调用一次。

另外，过程中还遇到一个BUG分享一下：

即：

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

经过详细排查....发现当初写这个项目的人埋了一个坑...

由于这边是直接在html中引入的vue，没有使用vue-cli，webpack等等，当时定义data时，定义成了：

而正确的定义方式应该是：

就是这个导致的报错。

vue-tour 实现用户指引功能

猜你喜欢