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

JavaScript

神奇Eva

2020-03-13

我是vuejs的新手，但是无论何时我调整窗口大小都想获取窗口大小，以便可以将其与需要根据屏幕大小应用的函数的某些值进行比较。我也尝试使用watch属性，但是不确定如何处理它，所以这可能就是为什么它不起作用的原因

  methods: {

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

第1552篇《Vue JS-如何在更改窗口时获取窗口大小》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
L番长 2020.03.13

您可以随时随地使用

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()
}
达蒙西里 2020.03.13

将此代码放入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 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android