微客导航 » 文章资讯 » Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法

Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法

2023-09-08 04:35:04 159

需求：

1.页面部分元素的尺寸需要根据实际打开时浏览器尺寸进行设置；

2.页面打开后，调节浏览器窗口大小时需要动态调节部分元素的尺寸；

需要注意的点：

window.onresize只能在项目中一处进行引用触发，如果在多个地方进行引用触发，会导致只有1个触发事件生效。

解决“多个组件都需要触发”的方案只能是通过一个地方触发后通过组件间通信进行触发。

(以调节class为myDiv的div的宽度为例)

解决需求1的方案：

html

script

如上设置后，页面打开时便会动态计算myWidth的值（拼接了'px'后便是字符串属性了）

然后将这个值通过v-bind:style=”{width:myWidth}”赋值绑定到我们需要设置的div上了，需求1完成。

因为这个值是载入页面的时候就绑定了，是固定的值。那么在使用过程中，如果用户操作调节了浏览器窗口的大小，那么应该需要触发事件改变这个值才能使组件具有动态调节的效果，这个就是需求2了：

解决需求2的方案：

html

script

需要注意的点：

window.onresize只能在项目中一处进行引用触发，如果在多个地方进行引用触发，会导致只有1个触发事件生效。

解决“多个组件都需要触发”的方案只能是通过一个地方触发后通过组件间通信进行触发。

以上这篇Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法

热门推荐

随机推荐