VUE添加自定义指令修复苹果iOS微信上输入框失焦后的页面错乱BUG
微信这BUG好久了,据说是浏览器的锅~~~
本来想用 @blur 事件,后来想想还是要多用用别的方法。
局部自定义指令
或者全局定义指令
然后给页面的input和select加上指令 v-drop
以前做H5没用VUE的时候,是用的下面的代码
本来想用 @blur 事件,后来想想还是要多用用别的方法。
局部自定义指令
// *.vue写在data()同级 directives: { drop: { inserted: function (el) { let userUA = navigator.userAgent; if (userUA.indexOf('iPhone') > -1){ el.onblur = function(){ setTimeout(function(){ var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; window.scrollTo(0, Math.max(scrollHeight - 1, 0)); },100) } } } } },
或者全局定义指令
//main.js Vue.directive('drop', { inserted: function (el) { let userUA = navigator.userAgent; if (userUA.indexOf('iPhone') > -1){ el.onblur = function(){ setTimeout(function(){ var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; window.scrollTo(0, Math.max(scrollHeight - 1, 0)); },100) console.log(userUA) } } } })
然后给页面的input和select加上指令 v-drop
<input type="" v-drop> <select v-drop></select>
以前做H5没用VUE的时候,是用的下面的代码
//记得引入JQ let userUA = navigator.userAgent; if (userUA.indexOf('iPhone') > -1){ $("input,select").blur(function(){ setTimeout(function(){ var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; window.scrollTo(0, Math.max(scrollHeight - 1, 0)); },100) }) }