Vue聊天移动端手机横向

实现移动端横向样式兼容

...
mounted(){
//进入页面及是横屏状态
if(window.orientation===90||window.orientation===-90){
//横向了
}
//注册监听横向事件
let that = this;
window.addEventListener('orientationchange',that.changeH,false);
},
destroyed(){
//离开页面取消横向监听
//挂在在window上的事件监听，在注销的时候，要保证是同一个注册时间
let that =this;
window.removeEventListener('orientationchange',that.changeH,false);
},
methods:{
changeH(e){
if(window.orientation===90||window.orientation===-90){
//横向了
}else{
//未横向
}
}
}

注:网上很多代码判断移动端是否横向，区分了ios和安卓，这边实际打印发现安卓和ios打印出来的值都是90，所以没有做机型区分

进入页面获取焦点调用输入键盘

//dom结构
<from action='#' @submit.prevent>
<input ref='inputBox' type='search' @keypress='searchTab'>
</from>

//js处理
...
mounted(){
this.$nextTick(()=>{
this.$refs.inputBox.focus();
})
}

注:希望输入键盘的确认键提示的是搜索，兼容ios需要用from包裹一下，监听键盘输入了回车，实现是keypress，当e.keyCode的值为13时，即点击了确认