window.onresize监听窗口宽度踩坑 vue

踩坑方法
vue组件监听页面宽度变化最近网上比较常用的方法
此方法可以实现监听窗口变化但是！ 不支持组件重复循环使用不支持组件重复循环使用不支持组件重复循环使用 重要的事情说三遍！
此方法在多个相同组件渲染时只会触发最后一个组件的宽度监听其他的没有触发

mounted() {//获取屏幕尺寸this.screenWidth = document.body.clientWidthwindow.onresize = () => {console.log('高度');//屏幕尺寸变化return (() => {this.screenWidth = document.body.clientWidth})()}},watch: {screenWidth: function (n, o) {if (n <= 1200) {console.log('屏幕宽度小于1200了')} else {console.log('屏幕宽度没有小于1200')}}}

正确方法
当前页相同组件重复循环使用都会触发宽度监听

    mounted() {window.addEventListener("resize", this.watchWindowSize);},methods:{watchWindowSize() {// 获取窗口的宽度和高度，不包括滚动条var w = document.documentElement.clientWidth;var h = document.documentElement.clientHeight;// 打印结果console.log( "宽: " + w + ", " + "高: ")},  }

window.onresize监听窗口宽度踩坑 vue相关推荐

window.onresize监听浏览器变化内容被覆盖
在开发vue项目时,使用window.onresize监听浏览器的变化,发现自定组件使用内容显示正常,当判断传入参数的长度时,内容会被覆盖. 原因: 使用window.onresize监听浏览器变化, ...
vue 组件监听页面切换_vue项目如何监听窗口变化，达到页面自适应？
[自适应]向来是前端工程师需要解决的一大问题--即便作为当今非常火热的vue框架,也无法摆脱--虽然elementui.iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以 ...
vue动态监听窗口高度 - 全背景banner
vue动态监听窗口高度 - 全背景banner 参考项目文件 src/hr/index.vue [结合下文:第一种方法] 第一种方法:[本文手写代码] data() {return {screenHe ...
响应式onresize监听窗口大小
Onresize是框架/对象(Frame/Object)事件中的一个属性,窗口或框架被重新调整大小.或监听窗口被重新调整了大小. 1.以下 HTMl 标签支持 onresize事件 <a> ...
js监听html页面大小变化,JS监听窗口变化实时获取浏览器窗口大小
原理:通过监听窗口的变化来动态获取窗口大小用到的方法:addEventListener() 监听window的resize事件 js代码: // 定义事件侦听器函数 function watchWi ...
监听关闭页面事件 ajax,Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
网上很多博客说监听窗口关闭事件使用window.beforeunload,但是这个监听事件也会在页面刷新的时候执行,经过百度和自己的实际测试, 终于解决了这个问题,代码如下: mounted() { ...
uni-app监听窗口尺寸变化事件和隐藏键盘
文章目录监听窗口尺寸变化 uni.onWindowResize(CALLBACK) uni.offWindowResize(CALLBACK) 隐藏软键盘 uni.hideKeyboard() un ...
Win10 + VSCode踩坑 + vue项目开发：设置vscode终端为管理员权限
win10系统如何设置vscode的终端为管理员权限? 一次一次的授权太麻烦! 这里直接更改授权为管理员运行即可. 操作与设置步骤: "桌面找到"VSCode"程序图标 ...
react hooks 记录监听滚动条事件踩得坑
今天写项目时需要获取滚动条距离顶部和左部距离踩了一些坑话不多说直接上代码 const scrollChange = () => {// 监听滚动条距离顶部距离console.log(doc ...

window.onresize监听窗口宽度踩坑 vue

window.onresize监听窗口宽度踩坑 vue相关推荐

最新文章

热门文章