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 animate 动画效果使用说明
Nov 04 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
下拉框select的绑定示例
Sep 04 Javascript
详解Javascript中prototype属性(推荐)
Sep 03 Javascript
bootstrap table小案例
Oct 21 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
Vue组件实现触底判断
Jun 26 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
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
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
Javascript 事件流和事件绑定
2009/07/16 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
以windows service方式运行Python程序的方法
2015/06/03 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
Django查询数据库的性能优化示例代码
2017/09/24 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
大学生个人推荐信范文
2013/11/25 职场文书
办公室岗位职责
2014/02/12 职场文书
挂科检讨书范文
2014/02/20 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
李敖北大演讲稿
2014/05/24 职场文书
讲党性心得体会
2014/09/03 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书