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
方法来更新图表。
相关推荐
















