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

神奇Eva2020-03-13

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

  methods: {

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

L番长2020/03/13 20:26:52

您可以随时随地使用

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 20:26:52

将此代码放入Vue组件中：

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

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer