Vue实现调节窗口大小时触发事件动态调节更新组件尺寸
2018-02-01 18:04
696 查看
需求:
1. 页面部分元素的尺寸需要根据实际打开时浏览器尺寸进行设置;
2. 页面打开后,调节浏览器窗口大小时需要动态调节部分元素的尺寸;
解决“多个组件都需要触发”的方案只能是通过一个地方触发后通过组件间通信进行触发。
(以调节class为myDiv的div的宽度为例)
解决需求1的方案:
如上设置后,页面打开时便会动态计算myWidth的值(拼接了’px’后便是字符串属性了)
然后将这个值通过 v-bind:style=”{width: myWidth}” 赋值绑定到我们需要设置的div上了,需求1完成。
因为这个值是载入页面的时候就绑定了,是固定的值。那么在使用过程中,如果用户操作调节了浏览器窗口的大小,那么应该需要触发事件改变这个值才能使组件具有动态调节的效果,这个就是需求2了:
解决需求2的方案:
解决“多个组件都需要触发”的方案只能是通过一个地方触发后通过组件间通信进行触发。
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.js通过子组件通信和父子组件通信实现动态表单动态绑定事件(适合交互系统统一使用)
- C++ Builder 实现动态生成窗口、控件,以及处理控件事件
- vue 点击按钮实现动态挂载子组件
- C++ Builder 实现动态生成窗口、控件,以及处理控件事件(转载)
- Vue 爬坑之路(七)—— 监听滚动事件 实现动态锚点
- C++ Builder 实现动态生成窗口、控件,以及处理控件事件
- C# 中的动态创建组件(属性及事件)的实现思路及方法
- 子组件使用$emit事件触发父组件实现购物车功能
- Vue 爬坑之路(七)—— 监听滚动事件 实现动态锚点
- vue中用动态组件实现选项卡切换效果
- js实现浏览器窗口大小被改变时触发事件的方法
- 利用explorerBar实现动态的菜单栏,并创建触发事件
- vue动态绑定组件子父组件多表单验证功能的实现代码
- Vue.js学习(五):vue+axios+php+mysql 实现前端界面数据动态更新
- vue 兄弟组件之间事件触发
- vue 父组件向子组件传值,子组件动态获取数据更新
- js实现浏览器窗口大小被改变时触发事件的方法
- Qt窗口组件实现动态背景功能
- vue---vue2.x中父组件如何触发子组件事件方法?