Vue JS -如何在窗口大小更改时获取窗口大小

cxfofazt 于 2023-03-31 发布在 Vue.js

关注(0)|答案(6)|浏览(371)

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

methods: {

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

vue.js

来源：https://stackoverflow.com/questions/49380830/vue-js-how-to-get-window-size-whenever-it-changes

6条答案

按热度按时间

pxyaymoc1#

将以下代码放入Vue组件中：

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

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

赞(0）回复(0）举报 2023-03-31

axzmvihb2#

对于Vue3，您可以使用以下代码：

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

destroyed和beforeDestroyed在Vue3中不推荐使用，因此您可能希望使用beforeUnmount和unmounted

赞(0）回复(0）举报 2023-03-31

aor9mmx13#

最简单的方法

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>

赞(0）回复(0）举报 2023-03-31

lg40wkob4#

我查看了vue-window-size库的代码，除了附加逻辑之外，它只是在窗口调整大小时添加了一个事件侦听器，看起来它可以被指示去抖动。
对我来说最关键的问题是，当vue-router路由改变时，我的Vue SPA应用程序不会发出窗口调整事件，使<html>元素从1000 px变为4000 px，所以它导致我在观看由p5.js控制的画布元素使用p5.resizeCanvas()重绘壁纸时遇到各种问题。
我现在有一个不同的解决方案，它涉及到主动轮询页面的偏移高度。
首先要注意的是JavaScript内存管理，因此为了避免内存泄漏，我将setInterval放在created生命周期方法中，将clearInterval放在beforeDestroy生命周期方法中：

created() {
    this.refreshScrollableArea = setInterval(() => {
        const { offsetWidth, offsetHeight } = document.getElementById('app');
        this.offsetWidth = offsetWidth;
        this.offsetHeight = offsetHeight;
    }, 100);
},

beforeDestroy() {
    return clearInterval(this.refreshScrollableArea);
},

正如上面的代码所暗示的，我还放置了一些初始状态：

data() {
    const { offsetWidth, offsetHeight } = document.querySelector('#app');

    return {
        offsetWidth,
        offsetHeight,
        refreshScrollableArea: undefined,
    };
},

**注意：**如果您将getElementById与this.id（即：document.getElementById(this.id)将是未定义的，因为DOM元素是从外到内加载的，所以如果您看到源于data示例化的错误，请将width/height初始设置为0。

然后，我在offsetHeight上放置了一个监视器来监听高度变化并执行业务逻辑：

watch: {
        offsetHeight() {
            console.log('offsetHeight changed', this.offsetHeight);

            this.state = IS_RESET;
            this.setState(this.sketch);
            return this.draw(this.sketch);
        },
    },

**结论：**我使用performance.now()进行了测试：

document.querySelector('#app').offsetHeight 
document.getElementById('app').offsetHeight
document.querySelector('#app').getClientBoundingRect().height

都在大约相同的时间内执行：0.2ms，所以上面的代码每100 ms花费大约0.2ms。我目前发现在我的应用程序中这是合理的，包括在我调整慢客户端之后，它们的运行速度比我的本地机器慢一个数量级。
以下是自己研发的测试逻辑：

const t0 = performance.now();
const { offsetWidth, offsetHeight } = document.getElementById('app');
const t1 = performance.now();

console.log('execution time:', (t1 - t0), 'ms');

**额外奖励：**如果您的setInterval函数由于长时间运行而导致性能问题，请尝试将其 Package 在双requestAnimationFrame中：

created() {
    this.refreshScrollableArea = setInterval(() => {
        return requestAnimationFrame(() => requestAnimationFrame(() => {
            const { offsetWidth, offsetHeight } = document.getElementById(this.id);
            this.offsetWidth = offsetWidth;
            this.offsetHeight = offsetHeight;
        }));
    }, 100);
},

requestAnimationFrame本身是一个人应该研究的。我将把它留在这个答案的范围之外。
最后，我后来研究的另一个想法，但我没有使用，就是使用一个递归的setTimeout函数，并在其上设置动态超时（即：在页面加载之后衰减的超时）;但是，如果考虑递归setTimeout技术，请注意callstack/function-queue长度和尾部调用优化。

赞(0）回复(0）举报 2023-03-31

9gm1akwq5#

你可以随时随地使用这个

methods: {
    //define below method first.
    winWidth: function () {
        setInterval(() => {
            var w = window.innerWidth;
            if (w < 768) {
                this.clientsTestimonialsPages = 1
            } else if (w < 960) {
                this.clientsTestimonialsPages = 2
            } else if (w < 1200) {
                this.clientsTestimonialsPages = 3
            } else {
                this.clientsTestimonialsPages = 4
            }
        }, 100);
    }
},
mounted() {
    //callback once mounted
    this.winWidth()
}

赞(0）回复(0）举报 2023-03-31

ftf50wuq6#

如果您在Vue3中使用复合API，您可以使用以下代码

onMounted(() => {
  window.addEventListener("resize", handleWindowSizeChange);
  handleWindowSizeChange();
});
onUnmounted(() => {
  window.removeEventListener("resize", handleWindowSizeChange);
});
const handleWindowSizeChange = () => {
// your code
};

赞(0）回复(0）举报 2023-03-31

我来回答

Vue JS -如何在窗口大小更改时获取窗口大小

6条答案

最简单的方法

预览

相关问题

热门标签

最新问答