Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
更新时间：2018年09月15日 15:04:55 作者：郭绪涵
今天小编就为大家分享一篇Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
需求：
1. 页面部分元素的尺寸需要根据实际打开时浏览器尺寸进行设置；
2. 页面打开后，调节浏览器窗口大小时需要动态调节部分元素的尺寸；
需要注意的点：
window.onresize只能在项目中一处进行引用触发，如果在多个地方进行引用触发，会导致只有1个触发事件生效。
解决“多个组件都需要触发”的方案只能是通过一个地方触发后通过组件间通信进行触发。
(以调节class为myDiv的div的宽度为例)
解决需求1的方案：
html
<template>
<div class="example">
<div class='myDiv' v-bind:style="{width: myWidth}"></div>
</div>
</template>
script
<script>
export default {
// 其余的忽略不写了
data () {
return {
myWidth: (window.innerWidth - 500) + 'px'
}
}
}
</script>
如上设置后，页面打开时便会动态计算myWidth的值（拼接了'px'后便是字符串属性了）
然后将这个值通过 v-bind:style=”{width: myWidth}” 赋值绑定到我们需要设置的div上了，需求1完成。
因为这个值是载入页面的时候就绑定了，是固定的值。那么在使用过程中，如果用户操作调节了浏览器窗口的大小，那么应该需要触发事件改变这个值才能使组件具有动态调节的效果，这个就是需求2了：
解决需求2的方案：
html
<template>
<div class="example">
<div class='myDiv' v-bind:style="{width: myWidth}"></div>
</div>
</template>
script
<script>
export default {
// 其余的忽略不写了
data () {
return {
myWidth: (window.innerWidth - 500) + 'px'
}
},
mounted () {
// 注：window.onresize只能在项目内触发1次
window.onresize = function windowResize () {
// 通过捕获系统的onresize事件触发我们需要执行的事件
this.myWidth = (window.innerWidth - 500) + 'px';
}
}
}
</script>
需要注意的点：
window.onresize只能在项目中一处进行引用触发，如果在多个地方进行引用触发，会导致只有1个触发事件生效。
解决“多个组件都需要触发”的方案只能是通过一个地方触发后通过组件间通信进行触发。
以上这篇Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要为大家介绍了vue项目网站全局置灰功能实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了vue实现el-select的change事件过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
最近公司新启动了个项目，用的是vue框架在做,下面这篇文章主要给大家介绍了关于vue实现token登录验证的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue选择下拉框动态变化表单方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue自定义底部导航栏Tabbar的实现代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
vue插件mescroll.js实现移动端上拉加载和下拉刷新
这篇文章主要介绍了vue插件mescroll.js实现移动端上拉加载和下拉刷新，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
前端登录退出处理Token问题(获取、缓存、失效处理)及代码实现方法
token是一个用户信息的表示,在登录中将会从后端拿到token,然后用户才可以进行往后的一系列操作,这篇文章主要给大家介绍了关于前端登录退出处理Token问题(获取、缓存、失效处理)及代码实现的相关资料,需要的朋友可以参考下2024-01-01
大家在写vue项目的时候会遇到给组件的各种命名，接下来通过本文给大家分享vue组件name的作用小结，感兴趣的朋友跟随脚本之家小编一起看看吧2018-05-05
vue element-ui如何在el-tabs组件最右侧添加按钮
这篇文章主要介绍了vue element-ui如何在el-tabs组件最右侧添加按钮问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要为大家详细介绍了vue-drawer-layout实现手势滑出菜单栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
最新评论