vue监听window.innerWidth变化

可以使用Vue的watch属性来监听window.innerWidth的变化，代码如下：

watch: {
  '$vuetify.breakpoint.width' (newVal, oldVal) {
    // do something when window.innerWidth changes
  }
}

其中`$vuetify.breakpoint.width`是Vuetify框架提供的一个属性，可以实时获取当前窗口的宽度。当窗口宽度发生变化时，watch函数会自动执行相应的操作。

相关问题

vue2+js设置监听动态获取window.innerWidth和window.innerHeight

在Vue2中，如果想要动态获取`window.innerWidth`和`window.innerHeight`并设置监听，可以使用Vue的响应式系统来实现。由于Vue的响应式系统不直接支持对原生DOM属性的监听，因此需要借助`watch`来观察`window`对象的变化。

下面是一个简单的示例，展示如何在Vue2项目中实现监听`window.innerWidth`和`window.innerHeight`：

new Vue({
  el: '#app',
  data() {
    return {
      width: window.innerWidth,
      height: window.innerHeight
    };
  },
  watch: {
    // 监听window尺寸变化
    '$route'(to, from) {
      this.resize();
    },
    // 监听resize事件
    '$window'(to, from) {
      this.resize();
    }
  },
  methods: {
    resize() {
      this.width = window.innerWidth;
      this.height = window.innerHeight;
    }
  },
  mounted() {
    // 组件挂载后立即触发一次resize方法，更新尺寸
    this.resize();
    // 监听窗口尺寸变化
    window.addEventListener('resize', this.resize);
  },
  beforeDestroy() {
    // 销毁前移除事件监听
    window.removeEventListener('resize', this.resize);
  }
});

在上述代码中，我们在Vue实例的`data`函数中定义了`width`和`height`变量来存储当前窗口的宽度和高度。在`mounted`钩子函数中，我们设置了窗口的监听事件，并在`resize`方法中更新`width`和`height`的值。为了避免内存泄漏，我们在`beforeDestroy`钩子函数中移除了事件监听。

需要注意的是，上述代码中的`$route`和`$window`是示例用法，实际上Vue并没有内置这些响应式变量。在实际应用中，你可以使用`this.$route`来获取路由信息，而`$window`需要你自定义一个响应式的`window`对象。

// 监听 data 变化 'window.innerWidth': { handler(newVal, oldVal) { this.creatEchart() } }怎么改成监听的desk的width

如果你想监听某个元素（比如id为'desk'的元素）的宽度变化，而不是直接监听全局的 `window.innerWidth`，你需要在你的Vue组件中找到这个元素并为其添加一个自定义的`v-on:resize`指令。首先，在模板中找到对应的元素，并给它一个引用：

<div ref="myDesk" id="desk" @resize="onDeskResize">...</div>

然后在methods中定义`onDeskResize`函数，更新你之前的方法，让它针对新选择的元素：

methods: {
  creatEchart() {
    if (this.myChart && this.myChart.dispose) {
      this.myChart.dispose();
    }

    const deskWidth = this.$refs.myDesk.clientWidth; // 获取元素的实际宽度

    let option = ... // 更新option，将deskWidth作为系列或其他需要宽度的配置项

    this.myChart.setOption(option);
  },
  onDeskResize() {
    this.creatEchart(); // 当desk的宽度发生变化时，重新绘制图表
  }
}

现在，当'desk'元素的宽度改变时，`onDeskResize`方法会被触发，并调用`creatEchart`方法来更新图表。