在vue中使用resize事件监听浏览器窗口的变化

Posted 2023-03-01

参考技术A 问题：在项目中的需求是根据浏览器的视口来判断是否显示下拉框，想法是使用window的resize事件来监听窗口大小的变化，如果窗口高度小于900，则显示下拉框，高于则隐藏下拉框

最初是在script中注册的resize事件，遇到一个问题，窗口发生变化的时候，vue无法监听到窗口的变化，从而无法更新绑定的值。
解决：在mounted钩子中注册resize事件，在使用watch监听数据的变化，重新赋值

用JS或者jQuery可以监听浏览器窗口的变化吗

我要的效果是这样的：当浏览器窗口大小变化时（缩小或者放大浏览器窗口），能够实时获取当前浏览器窗口的宽度和高度。我说的实时指不用刷新当前页面，当浏览器窗口大小改变时就触发事件。

试试resize事件
$(window).resize(function()
var width = $(this).width();
var height = $(this).height();
);

不过resize事件好像对框架不起作用 参考技术A 方法一：在标签上加入 onLoad="" onResize="" 方法 写上对应的方法即可
方法二：window.onresize=function()///..... 在方法里面写上对应的代码即可
着两种方法基本都可以解决你的问题了