vue.js实时监听浏览器界面大小改动的办法

最新推荐文章于 2024-01-19 14:46:36 发布

原创最新推荐文章于 2024-01-19 14:46:36 发布 · 4.3k 阅读

2 ·

CC 4.0 BY-SA版权

前端Vue框架专栏收录该内容

12 篇文章

订阅专栏

这段代码在页面挂载时获取屏幕宽高，监听窗口尺寸变化。当屏幕宽小于等于767且高小于等于350时，设置seen为true、peen为false，并为菜单添加点击展开收起功能；否则，设置seen为false、peen为true。

mounted() {
    let self = this;
    this.screenWidth = document.body.clientWidth; //767
    this.screenHeight = document.body.clientHeight;//350
    window.onresize = () => {
        return (() => {
            this.screenWidth = document.body.clientWidth;
            this.screenHeight = document.body.clientHeight;
            if(this.screenWidth<=767 & this.screenHeight<=350) {
               self.seen = true;
               self.peen = false;
                $(document).ready(function(){
                    $(".homeMenu").click(function(){
                        $(".panel").slideToggle("fast")
                    });
                });
            }else{
                self.seen = false;
                self.peen = true;
            }
        })();
    };
}