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


Posted in Javascript onSeptember 15, 2018

需求:

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实现调节窗口大小时触发事件动态调节更新组件尺寸的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
vue环境搭建简单教程
Nov 07 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 Javascript
安装多版本Vue-CLI的实现方法
Mar 24 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 #Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 #Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 #Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 #Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 #Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 #Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 #Javascript
You might like
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
php中执行系统命令的方法
2015/03/21 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
Python中splitlines()方法的使用简介
2015/05/20 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
一份python入门应该看的学习资料
2018/04/11 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
网络技术支持面试题
2013/04/22 面试题
生物技术毕业生自荐信
2013/10/23 职场文书
收银出纳员岗位职责
2014/02/23 职场文书
结婚保证书范文
2014/04/29 职场文书
精神文明建设标语
2014/06/16 职场文书
乡镇精神文明建设汇报材料
2014/08/15 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫