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中的end()使用方法
Jul 10 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
使用AOP改善javascript代码
May 01 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
使用 jQuery 实现表单验证功能
Jul 05 jQuery
Vue.js进行查询操作的实例详解
Aug 25 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 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
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
php集成动态口令认证
2016/07/21 PHP
javascript 日期常用的方法
2009/11/11 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
Python基于有道实现英汉字典功能
2015/07/25 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
python画微信表情符的实例代码
2019/10/09 Python
Django之form组件自动校验数据实现
2020/01/14 Python
Python csv文件记录流程代码解析
2020/07/16 Python
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
计算机专业大学生的自我评价
2013/11/14 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
高中生职业规划范文
2014/03/09 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
晚会闭幕词
2015/01/28 职场文书
小学教师年度个人总结
2015/02/05 职场文书
女方离婚起诉书
2015/05/18 职场文书
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python