vue中获取屏幕高度（封装使用）

vue中获取屏幕高度（封装使用）

我们js原生获取的方法在这里就不赘述了，有需要可以自行百度

在这里我们封装一个获取宽高的方法放在Vue实例上（方便我们在这个项目中进行引用），把下面这段代码放到main.js里即可；

/**
 * 获取屏幕宽高
 */
Vue.prototype.$getViewportSize = function(){
  return {
    width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,//兼容性获取屏幕宽度
    height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight//兼容性获取屏幕高度
  };
};

使用

然后我们来看vue的实例，（在项目中打印一下this.$getViewportSize就可以看到）；

console.log(this.$getViewportSize)

能看到之后我们再来执行一下

console.log(this.$getViewportSize())

然后我们就可以得到这样一个对象

在项目中别的页面也是一样的用法