05vue之监听事件onresize和input

2019-05-15  本文已影响0人  奶酪凌

\color{red}{onresize属性可以用来获取或设置当前窗口的resize事件的事件处理函数}
目的:主要运用在注册页面,当点击表单中的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>
上一篇下一篇

猜你喜欢

热点阅读