最近做公眾號項目,想着統一風格,所以決定使用vux。
在調試時發現,只要鼠標點擊x-input輸入框,就會報錯
什么鬼,作為前端小白的我一臉懵逼,這么快就遇到vux框架的坑了嗎?
根據錯誤提示,在node_modules中查找vux的x-input實現方式,
在node_modules => vux => src => x-input找到如下目錄內容:
提示說了:問題在 focusHandler index.vue:365
打開index.vue 在365行果然找到出問題的代碼
然鵝,這玩意啥意思我完全不懂,搜索了一番,
發現
scrollIntoViewIfNeeded()
方法的作用是:將不在瀏覽器窗口的可見區域內的元素滾動到瀏覽器窗口的可見區域。但如果該元素已經在瀏覽器窗口的可見區域內,則不會發生滾動。
與之相近的還有
scrollIntoView()
方法讓當前的元素滾動到瀏覽器窗口的可視區域內。
顯然,scrollIntoViewIfNeeded()在移動端開發中是個好用的方法,但是,發現了,這個好用的方法不是面向全部瀏覽器的
scrollIntoView 與 scrollIntoViewIfNeeded API 介紹
參考文章給了倆方法適應的瀏覽器:
看到這里,我總算明白了,這個錯誤應該是因為我用了firefox瀏覽器,,,,難怪搜了半天,沒幾個遇到我這情況的。。。
於是乎,我有了個大膽的想法,改一下index.vue的源碼,如下:將方法改為兼容性更好的scrollIntoView
重新編譯cnpm run dev,
在x-input中輸入測試,沒有報錯了,over!