Vue JS - 如何在窗口发生变化时获取窗口大小

Question

我是 vuejs 的新手，但每当我调整它的大小时，我都会尝试获取窗口大小，以便我可以将它与我需要根据屏幕大小应用的函数的某个值进行比较。我也尝试使用 watch 属性，但不知道如何处理它，所以这可能是它不起作用的原因

  methods: {

    elem() {
     this.size = window.innerWidth;
     return this.size;
   },
  mounted() {
    if (this.elem < 767){ //some code }
   }

原文由 sara 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将此代码放入您的 Vue 组件中：

 created() {
  window.addEventListener("resize", this.myEventHandler);
},
destroyed() {
  window.removeEventListener("resize", this.myEventHandler);
},
methods: {
  myEventHandler(e) {
    // your code for handling resize...
  }
}

这将在创建组件时注册您的 Vue 方法，在调整浏览器窗口大小时触发 myEventHandler，并在您的组件被销毁后释放内存。

原文由 Goran 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

最简单的方法

https://www.npmjs.com/package/vue-window-size

预习

import Vue from 'vue';
import VueWindowSize from 'vue-window-size';

Vue.use(VueWindowSize);

然后你可以像这样从你的组件中正常访问它：

 <template>
  <div>
    <p>window width: {{ windowWidth }}</p>
    <p>window height: {{ windowHeight }}</p>
  </div>
</template>

原文由 Calvintwr 发布，翻译遵循 CC BY-SA 4.0 许可协议