05vue之监听事件onresize和input
2019-05-15 本文已影响0人
奶酪凌
目的:主要运用在注册页面,当点击表单中的input,手机端出现输入框,固定在底部的层则会挤到上方,导致页面不美观。
不进行监听处理的页面
有图可知,当我点击input的时候,固定在底部的层级会被挤在键盘上方。
底部固定层级,一般使用position:fixed;
//Mfooter 固定在页面底部
<div class="Mfooter" v-show="hidshow">好好学习 天天向上</div>
<script>
export default {
//data中的docmHeight和showHeight必须要先有值显示。
data() {
return {
docmHeight:document.documentElement.clientHeight,
showHeight:document.documentElement.clientHeight,
hidshow:true
}
},
mounted() {
window.onresize = ()=>{
return(()=>{
this.showHeight = document.body.clientHeight;
})()
}
},
watch:{
showHeight:function() {
if(this.docmHeight > this.showHeight){
this.hidshow=false
}else{
this.hidshow=true
}
}
},
methods: {
}
}
</script>
根据监听判断使用后
ps:这个方法是百度的,自己使用感觉可以,目前我是觉得不错。
2.HTML页面中的window.onresize
window.onresize = funcRef;
funcRef是一个函数引用。
<script>
window.onresize=funcRef;
function funcRef(){
//注意clientWidth等的大小写问题
var Wbox = document.documentElement.clientWidth;
alert(Wbox);
}
</script>