首页 > 其他 > 详细

Vue 实时获取屏幕宽高

时间:2020-04-21 16:35:47      阅读:1081      评论:0      收藏:0      [点我收藏+]

Vue 实时获取屏幕宽高

 

export default {
    name: ‘page-index‘,
    data(){
        return{
            windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
            windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
        }
    },    
    methods: {
    },
    // <!--在watch中监听实时宽高-->
    watch: {
      windowHeight (val) {
        let that = this;
        console.log("实时屏幕高度:",val, that.windowHeight );
      },
      windowWidth (val) {
        let that = this;
        console.log("实时屏幕宽度:",val, that.windowHeight );
      }
    },

    mounted() {
        var that = this;
        // <!--把window.onresize事件挂在到mounted函数上-->
        window.onresize = () => {
            return (() => {
              window.fullHeight = document.documentElement.clientHeight;
                window.fullWidth = document.documentElement.clientWidth;
              that.windowHeight = window.fullHeight;  //
              that.windowWidth = window.fullWidth; //
            })()
          };
    },
}

 

Vue 实时获取屏幕宽高

原文:https://www.cnblogs.com/sanyekui/p/12745152.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!