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