vue中在mounted中window.onresize不生效

最新推荐文章于 2023-04-23 15:17:15 发布
最新推荐文章于 2023-04-23 15:17:15 发布
阅读量692 收藏 1
点赞数 2
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hl_Abel/article/details/119926467
版权

在vue开发中，因为引用的父组件和子组件都使用了window.onresize以至于一个window.onresize失效。
解决方案==>可以采用下面的方式

window.onresize = () => this.screenWidth = window.innerWidth 
// 改为以下写法
window.addEventListener('resize', () => this.screenWidth = window.innerWidth, false)
hl_Abel
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue在index.html中引入静态文件不生效问题及解决方法
11-28
本文针对的是Vue小白，不喜勿喷，谢谢 出现该问题的标志如下 控制台warning（Resource interpreted as Stylesheet but transferred with MIME type text/html） 出现的原因及解决办法 第一种可能出现原因就是引入...
window.onresize和window.addEventListener
weixin_43258184的博客
11-05 860
vue中在mounted中window.onresize不生效是因为： 引用的父组件和子组件都使用了window.onresize以至于一个window.onresize失效。 把window.onresize改为window.addEventListener window.onresize = () => { if (screenfull.isFullscreen) { this.show = false; this.tableHeight = w
vue项目中使用window的onresize事件
roongyan92的博客
12-11 6037
vue项目中使用vue-echars绘制图表时，需要实时根据窗口大小调整图表的大小，我使用的auto-resize属性，没有作用，没有找出错误在哪里，使用window.onresize事件，必须销毁才不会报错哦，代码如下： <template> <chart ref="chart1" :options="orgOptions"></chart> &l...
vue窗口变化onresize
qq_45782978的博客
02-28 92
mounted() { window.onresize = () => { this.centerWidth = document.documentElement.clientWidth; this.centerHeight = document.documentElement.clientHeight; }; }
Vue 实时监听窗口变化 windowresize
qq_39241421的博客
11-06 4280
方法一： First-step : 定义变量 data(){ return{ formLabelWidth : '123px' } }, Second-step:   根据生命周期 在mounted 中绑定 窗口变化 mounted(){ const that = this window.on...
vue组件mounted中window.onresize无效
BigFamer的博客
03-09 2061
一、问题描述 在开发中发现，有两个vue组件中mounted中都用了window.onresize，但是在其中一个组件中正常，在另一个组件中无效。 二、问题分析 我注意到组件A是组件B的父组件，组件A（父组件）中window.onresize功能正常，组件B（子组件）中window.onresize功能无效。 初步猜测是由于父子组件中同时使用，导致子组件中的失效。 三、问题解决 我尝试把子组件中的 window.onresize = () => { console.log(27) } 写成： wi
vue中是多个组件使用window.onresize不生效问题
yf18040578780的博客
04-23 642
vue中是多个组件使用window.onresize不生效问题
window.onresize无效
sha_1234的博客
03-15 922
使用window.onresize时无效
使用echarts需要图表自适应，window.onresize方法失效解决办法
PolarisWay的博客
01-29 1544
echarts图表window.onresize方法失效的解决方法
vue中注册原生事件，绑定事件到window上
m0_49159526的博客
06-02 1922
最近因工作需要使用到高德地图，在调用时拼接了字符串模版，原生绑定了一个点击事件，并传递参数，如下图 百度一番后发现，在vue里，所有的方法都是在组件内部声明的，也只能在组件内部调用，原生调用h5方法必须定义在window对象下 因此有了如下操作 在mounted里给window绑定这个事件 mounted() { window['hClick'] = (id) => { this.hClick(id) } }, ...
vue.js和vue.min.js
06-13
vue.js和vue.min.js
在vue中created、mounted等方法使用小结
10-15
主要介绍了在vue中created、mounted等方法使用小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 在methods中调用mounted的实现操作
11-20
如果你要问在mounted中调用methods中的方法 那么如果是我 我会直接把这个方法直接写在mounted中 补充知识：vue中methods一个方法调用另外一个方法 vue在同一个组件内； methods中的一个方法调用methods中的另外一个...
VueJs 监听 window.resize 方法---窗口变化
热门推荐
小小码农披荆斩棘的博客
08-14 9万+
Vuejs监听 window 事件 window.resize
VueJs 监听 window.resize 方法
鱼塘虾本虾的博客
11-08 4327
Vuejs 本身就是一个 MVVM 的框架。 但是在监听 window 上的 事件 时，往往会显得 力不从心。 比如 这次是 window.resize 恩，我做之前也是百度了一下。看到大家伙都为这个问题而发愁。 问题： 今天我也 遇到了这样一个问题， 是关于canvas 自适应。 根据窗口的变化去变化 canvas 的宽度 备注： 重要的问题说三遍 解决 框架内的b
echarts实现宽高自适应，vue中解决window.onresize失效
xioxi
10-10 997
echarts实现宽高自适应，vue中解决window.onresize失效
vue监听元素变化 不触发window.onresize
真爱一生的博客
08-30 468
监听元素变化
vue移动端强制横屏展示
hl_Abel的博客
04-22 2597
一、在 index.html 中加入计算 font-size 代码 window.calcFontSize = () => { document.documentElement.style.fontSize = Math.min( document.documentElement.clientWidth, document.documentElement.clientHeight
vue mounted中获得 window.sessionStorage
最新发布
07-28
您可以在Vue的`mounted`生命周期钩子中使用`window.sessionStorage`来获取`sessionStorage`。 以下是一个示例代码： ```javascript mounted() { const sessionStorageData = window.sessionStorage.getItem('key'...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值