input不管用 vue_使用Vue-scroller頁面input框不能觸發滑動怎麼辦

使用Vue-scroller頁面input框不能觸發滑動怎麼辦

釋出時間：2020-08-10 16:09:40

來源：億速雲

閱讀：87

作者：小新

小編給大家分享一下使用Vue-scroller頁面input框不能觸發滑動怎麼辦，相信大部分人都還不怎麼了解，是以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章後大有收獲，下面讓我們一起去了解一下吧！

因為項目中有個填寫資訊的頁面，有很多input框，引入vue-scroller後發現在input區域滑動失效；看了一下引入的vue-scroller元件裡的源碼，發現在元件源碼裡的Scroller.vue中在touchStart、touchMove和mouseDownd方法的時候被return了

touchStart(e) {

// Don't react if initial down happens on a form element

//注釋掉這段代碼就行

// if (e.target.tagName.match(/input|textarea|select/i)) {

// return

// }

//注釋掉這段代碼就行

if (e.target.tagName.match(/textarea|select/i)) {

return;

}

this.scroller.doTouchStart(e.touches, e.timeStamp);

},

touchMove(e) {

//touchMove也要重新加個判斷，否則input框不能左右滑動

if (!e.target.tagName.match(/input/i)) {

e.preventDefault();

}

this.scroller.doTouchMove(e.touches, e.timeStamp);

},

mouseDown(e) {

// Don't react if initial down happens on a form element

//注釋掉這段代碼就行

// if (e.target.tagName.match(/input|textarea|select/i)) {

// return

// }

//注釋掉這段代碼就行

if (e.target.tagName.match(/textarea|select/i)) {

return;

}

this.scroller.doTouchStart(

[

{

pageX: e.pageX,

pageY: e.pageY

}

],

e.timeStamp

);

this.mousedown = true;

},

具體我也不知道阻止滑動input框區域是為了防止什麼Bug，有知道的可以在評論區說一下；最後因為vue-scroller是npm引入的方式，怕會被更新掉，是以直接把元件代碼copy出來放在項目的components目錄下引用了

main.js引入方式和插件類似，使用方式和官方一樣

以上是使用Vue-scroller頁面input框不能觸發滑動怎麼辦的所有内容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的内容對大家有所幫助，如果還想學習更多知識，歡迎關注億速雲行業資訊頻道！