这篇文章主要为大家详细介绍了Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随四海网的小编两巴掌来看看吧!
1. 页面部分元素的尺寸需要根据实际打开时浏览器尺寸进行设置;
2. 页面打开后,调节浏览器窗口大小时需要动态调节部分元素的尺寸;
window.onresize只能在项目中一处进行引用触发,如果在多个地方进行引用触发,会导致只有1个触发事件生效。
解决“多个组件都需要触发”的方案只能是通过一个地方触发后通过组件间通信进行触发。
(以调节class为myDiv的div的宽度为例)
代码如下:
<template>
<div class="example">
<div class='myDiv' v-bind:style="{width: myWidth}"></div>
</div>
</template>
代码如下:
<script>
export default {
// 其余的忽略不写了
data () {
return {
myWidth: (window.innerWidth - 500) + 'px'
}
}
}
</script>
如上设置后,页面打开时便会动态计算myWidth的值(拼接了'px'后便是字符串属性了)
然后将这个值通过 v-bind:style=”{width: myWidth}” 赋值绑定到我们需要设置的div上了,需求1完成。
因为这个值是载入页面的时候就绑定了,是固定的值。那么在使用过程中,如果用户操作调节了浏览器窗口的大小,那么应该需要触发事件改变这个值才能使组件具有动态调节的效果,这个就是需求2了:
代码如下:
<template>
<div class="example">
<div class='myDiv' v-bind:style="{width: myWidth}"></div>
</div>
</template>
代码如下:
<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实现调节窗口大小时触发事件动态调节更新组件尺寸的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持四海网。
本文来自:http://www.q1010.com/184/6254-0.html
注:关于Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。
关键词:vue.js
四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。