Window.onresize,vue resize
本文主要介绍了window.onresize在vue中的使用，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
window.onresize的使用重点在以下几点：window . on resize注意事项1。浏览器大小更改响应事件2。谷歌Chrome 3。页面大小更改事件。
window.onresize的使用
说下重点
Window.onresize只能在一个组件中使用，如果多个组件调用它，就会被覆盖。所以我的解决方案是在App.vue中使用，获取文档。DocumentElement。clientWidth(即浏览器宽度)并存储在vuex中。其他组件只需要用computed(计算属性)获取vuex的clientWidth，然后通过watch监听ClientWidth的值来触发组件事件。
App.vue代码
脚本
导出默认值{
名称：“应用程序”，
已安装(){
window.onresize=()={
this.clientWidthResize()
}
},
方法：{
clientWidthResize () {
这个。$ store . commit( Tool/resize width ，Number(document . documentelement . client width))
}
}
}
/脚本
Storetool.js代码(这里是模块化开发)
导出默认值{
命名空间：对，
状态：{
客户端宽度：0
},
getter:{ }，
突变：{
resizeWidth(state，clientWidth) {
state . client width=client width；
},
},
动作：{}，
}
使用组件
计算值：{
clientWidth () {
归还这个。$ store . state . tool . client width Number(document . document element . client width)
}
},
观察：{
客户端宽度(val) {
控制台.日志(val)
}
},
window.onresize笔记
1.浏览器尺寸变化响应事件
window.onresize=function(){.}
这里需要注意的是，在onresize响应事件处理中，获得的页面大小参数是改变后的参数。
//获取更改后的页面宽度。
var current width=document . body . client width；
如果您需要使用更改前的参数，您需要创建一个全局变量来保存以前的参数(并且记住在onresize事件中刷新这个全局变量来保存新的参数值)。
2.谷歌浏览器中
window.onresize事件默认会执行两次(偶尔只会执行一次，网上大多数说法认为这是Chrome的bug)。
解决方法：
一般来说，建议创建一个新的标志位来延迟复位，并控制它防止它第二次执行。代码如下：
var firstOnResizeFire=true//Google Chrome onresize事件会执行两次。在这里，添加一个标志来控制它。
window.onresize=function()
{
if (firstOnResizeFire) {
nflayout . tabscrollermenuadjust(home page width)；
firstOnResizeFire=false
//0.5秒后复位标志位(Chrome中的window.onresize默认执行两次)
setTimeout(function() {
firstOnResizeFire=true
}, 500);
}
home page width=document . body . client width；//再次保存新宽度。
}
3.页面尺寸变更事件
注意两个方向：增大尺寸和减小尺寸。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。