vue如何获取屏幕宽高

在Vue中获取屏幕的宽高主要有以下几种方法：1、使用window对象的innerWidth和innerHeight属性，2、使用window对象的outerWidth和outerHeight属性，3、使用窗口的resize事件监听。这些方法都能帮助我们在Vue中获取屏幕的宽高，并做出相应的响应式调整。

一、使用window对象的innerWidth和innerHeight属性

直接通过window.innerWidth和window.innerHeight属性即可获取屏幕的宽度和高度。具体代码如下：

export default {

  data() {
    return {
      screenWidth: window.innerWidth,
      screenHeight: window.innerHeight
    }
  },
  methods: {
    updateScreenSize() {
      this.screenWidth = window.innerWidth;
      this.screenHeight = window.innerHeight;
    }
  },
  mounted() {
    window.addEventListener('resize', this.updateScreenSize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateScreenSize);
  }
}

这种方法简单直接，可以在组件的mounted生命周期钩子中添加resize事件监听，以确保在窗口大小变化时更新屏幕宽高。

二、使用window对象的outerWidth和outerHeight属性

window.outerWidth和window.outerHeight也可以用来获取屏幕的宽度和高度，包含了浏览器的工具栏等。具体代码如下：

export default {

  data() {
    return {
      screenWidth: window.outerWidth,
      screenHeight: window.outerHeight
    }
  },
  methods: {
    updateScreenSize() {
      this.screenWidth = window.outerWidth;
      this.screenHeight = window.outerHeight;
    }
  },
  mounted() {
    window.addEventListener('resize', this.updateScreenSize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateScreenSize);
  }
}

这种方法也可以在组件的mounted生命周期钩子中添加resize事件监听，以确保在窗口大小变化时更新屏幕宽高。

三、使用窗口的resize事件监听

通过监听窗口的resize事件，可以在窗口大小变化时动态获取并更新屏幕的宽高。具体代码如下：

export default {

  data() {
    return {
      screenWidth: 0,
      screenHeight: 0
    }
  },
  methods: {
    getScreenSize() {
      this.screenWidth = window.innerWidth;
      this.screenHeight = window.innerHeight;
    }
  },
  mounted() {
    this.getScreenSize();
    window.addEventListener('resize', this.getScreenSize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.getScreenSize);
  }
}

这种方法在组件挂载时获取一次屏幕宽高，并在窗口大小变化时更新屏幕宽高。

四、使用Vue的响应式特性

结合Vue的响应式特性，可以更方便地处理屏幕宽高的变化。具体代码如下：

export default {

  data() {
    return {
      screenSize: {
        width: window.innerWidth,
        height: window.innerHeight
      }
    }
  },
  methods: {
    updateScreenSize() {
      this.screenSize.width = window.innerWidth;
      this.screenSize.height = window.innerHeight;
    }
  },
  mounted() {
    window.addEventListener('resize', this.updateScreenSize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateScreenSize);
  }
}

这样可以将屏幕的宽高绑定到一个响应式对象中，便于在模板中使用。

五、使用第三方库

如果需要更复杂的功能，可以考虑使用第三方库如vue-resize或resize-observer-polyfill。具体代码如下：

import { ResizeObserver } from 'resize-observer-polyfill';

export default {
  data() {
    return {
      screenWidth: 0,
      screenHeight: 0
    }
  },
  methods: {
    updateScreenSize(entries) {
      for (let entry of entries) {
        this.screenWidth = entry.contentRect.width;
        this.screenHeight = entry.contentRect.height;
      }
    }
  },
  mounted() {
    this.resizeObserver = new ResizeObserver(this.updateScreenSize);
    this.resizeObserver.observe(document.body);
  },
  beforeDestroy() {
    this.resizeObserver.disconnect();
  }
}

使用第三方库可以更灵活地处理屏幕宽高的变化，并提供更丰富的功能。

总结来说，在Vue中获取屏幕宽高的方法有很多，可以根据实际需求选择合适的方法。直接使用window.innerWidth和window.innerHeight属性是最简单的方法，而监听resize事件和使用第三方库则适用于更复杂的场景。建议在项目中结合使用这些方法，以实现最佳的用户体验。

相关问答FAQs：

1. 如何使用Vue获取屏幕宽高？

在Vue中，我们可以使用JavaScript来获取屏幕的宽度和高度。以下是一种常见的方法：

export default {
  data() {
    return {
      screenWidth: 0,
      screenHeight: 0
    };
  },
  mounted() {
    this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    this.screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

    window.addEventListener('resize', this.updateScreenSize);
  },
  destroyed() {
    window.removeEventListener('resize', this.updateScreenSize);
  },
  methods: {
    updateScreenSize() {
      this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      this.screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    }
  }
};

通过上述代码，我们通过window.innerWidth和window.innerHeight来获取屏幕的宽度和高度。同时，我们还监听了resize事件，以便在窗口大小改变时更新屏幕尺寸。

2. 如何在Vue模板中使用屏幕宽高？

一旦我们获取了屏幕的宽度和高度，我们可以在Vue模板中使用它们。以下是一个示例：

<template>
  <div>
    <p>屏幕宽度: {{ screenWidth }}px</p>
    <p>屏幕高度: {{ screenHeight }}px</p>
  </div>
</template>

在上面的代码中，我们通过双花括号语法{{ }}来显示屏幕宽度和高度。

3. 如何在Vue中根据屏幕宽高做响应式布局？

Vue的响应式特性使得我们可以根据屏幕的宽度和高度来进行布局调整。以下是一个示例：

<template>
  <div :class="{ 'small-screen': screenWidth < 768, 'large-screen': screenWidth >= 768 }">
    <p>屏幕宽度: {{ screenWidth }}px</p>
    <p>屏幕高度: {{ screenHeight }}px</p>
    <p v-if="screenWidth < 768">这是一个小屏幕布局</p>
    <p v-else>这是一个大屏幕布局</p>
  </div>
</template>

<style>
.small-screen {
  background-color: red;
}

.large-screen {
  background-color: blue;
}
</style>

在上面的代码中，我们使用了:class指令来根据屏幕宽度来动态添加CSS类。当屏幕宽度小于768px时，我们添加了small-screen类，否则添加了large-screen类。然后，我们可以在样式表中为这两个类定义不同的样式。

通过以上方法，我们可以根据屏幕的宽度和高度来实现响应式布局，提供更好的用户体验。