driver.js在页面分布引导上使用起来是很方便的。
但是在vue项目中需要跳转到其他路由去引导,在对应的钩子函数中可以获取目前走到那一步,并跳转到对应的路由,这些都是没问题的。
但是在跳转路由之后,却获取不到目标元素或者页面的元素没有高亮显示,只有一个边框。
对于后者的问题,只需要加个定时器即可,this.nextTick是无效的。
而前者,是由于路由跳转之后,你所定义的配置项steps里面的元素在这个路由(页面)下没有。导致steps配置项里面没有这个元素,driver它就自动给你更新了steps,导致索引改变,所以获取不到目标元素,只需要改成对应的下标即可。
因为公司保密条款,所以无法上代码,本人也比较懒得去写个demo复现。
所以就举个例子。
fatherPage下有两个元素:box1,和box2
sonPage1下有一个元素:box3
sonPage2下有一个元素:box4
而在app.vue下你定义的steps为 box1,box2,box3,box4这样的顺序
前两步box1,和box2是很正常的,当进行到第三步,通过判断页面跳转到sonPage1之后,这个页面由于有box1,box2,box3 三个元素,所以你应该执行steps的第三步即steps[2].
当进行到第四步时,你可能会觉得你要执行steps的第四步即steps[3],然后你会发现页面警告信息,提示你无效的element,must be instance of element 必须要是元素实例,它获取不到元素。
那这是什么原因导致的呢?
事实上当你进行到第四步来到sonPage2时,这个页面有box1,box2,box4但是不包含box3,所以控制台会有一个警告信息没有找到box3这个元素,此时的steps自动变成了box1,box2,box4,所以你要获取到box4,就应该还是steps[2]。
也就是说,每个页面的steps其实都是随页面元素来变化的,不存在的元素driver.js它会自动给你去掉,所以路由改变(页面跳转)之后的索引会改变。