VUE添加自定义指令修复苹果iOS微信上输入框失焦后的页面错乱BUG

微信这BUG好久了,据说是浏览器的锅~~~
本来想用 @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)
       
    })
 }





暧昧贴