关于driver.js的一些坑


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它会自动给你去掉,所以路由改变(页面跳转)之后的索引会改变。

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM