vue中进行窗口变化的监听

今天vue项目中用到的元素的宽度依赖与窗口的宽度，所以在进行宽度设置的时候涉及到窗口的变化，因为元素的宽度要随着窗口变化

分成几个步骤来实现这一过程

1、首先元素的宽度依赖与窗口的宽度，就需要有接受窗口宽度的变量

　　在data中设置：

screenWidth: document.documentElement.clientWidth,//屏幕宽度

2、窗口变化的时候需要及时的更新变量的值

　　在mounted中设置监听窗口变化的监听事件

window.addEventListener('resize',function(){that.screenWidth = document.body.offsetWidth;})

3、页面加载的时候要给元素赋值宽度

　　在mounted中根据窗口宽度设置元素宽度

document.getElementById('topbar').style.width = this.screenWidth-260 + 'px'//260是元素和窗口的差值，可以根据需要调整

4、监听窗口的变化

watch:{screenWidth:function(val){console.log(val)document.getElementById('topbar').style.width = Number(val)-260 + 'px'}},

转载于:https://www.cnblogs.com/wyongz/p/11206226.html

vue中进行窗口变化的监听相关推荐

vue中给window添加滚动监听无效的解决方案
页面中有这么一个需求,当页面滚动到一定高度之后,页面中的某些元素进行吸顶,固定到顶部位置,或者是滚动到一定程度进行更新数据的操作. 我相信不少网友查阅过类似的资料,网友给出的解决方案,很多都是在mou ...
vue中select选择框的监听事件
template模板: <el-select v-model="valueClass" placeholder="请选择学生" class="s ...
web前端面试高频考点——Vue原理（理解MVVM模型、深度/监听data变化、监听数组变化、深入了解虚拟DOM）
系列文章目录内容参考链接 Vue基本使用 Vue的基本使用(一文掌握Vue最基础的知识点) Vue通信和高级特性 Vue组件间的通信及高级特性(多种组件间的通信.自定义v-model.nextTi ...
oracle集群监听启动,在RAC中lsnrctl和srvctl操作监听区别
朋友今天询问了一个问题RAC中使用srvctl 操作监听和lsnrctl 操作监听结果不一样,下面我通过实验说明问题 0.listener.ora文件内容 LISTENER_RAC1 = (DESCR ...
Java中使用JNA实现全局监听Linux键盘事件
title: Java中使用JNA实现全局监听Linux键盘事件 date: 2019-05-03 19:08:00 Java中使用JNA实现全局监听Linux键盘事件用JNA实现的键盘监听,在Wi ...
Java中使用JNA实现全局监听Windows键盘事件
title: Java中使用JNA实现全局监听Windows键盘事件 date: 2019-05-02 21:55:00 Java中使用JNA实现全局监听Windows键盘事件前言: 一直打算做一个 ...
Unity中场景生命周期的监听: EditorSceneManager
本文分享Unity中场景生命周期的监听: EditorSceneManager 在Unity开发中, 有时我们需要在场景的某些生命周期时做一些特定的操作, 特别是在Editor模式下的一些工具代码. ...
TS中的事件，事件监听，移除，分发
TS中的事件,事件监听,移除,分发 TS代码如下(单例): /*** 事件消息处理*/ class EventCenter {/** 监听数组 */private listeners = {};pri ...
Android进阶之路 - 软键盘中右下角的设置与监听
在项目中,多多少少会遇到修改软键盘右下角按钮的需求,虽然已经写过几次,但是还是觉得在这里专心做个笔记比较放心 ~ 我的那些软键盘Blog ~ Android进阶之路 - 常见软键盘操作行为 Andro ...

vue中进行窗口变化的监听

vue中进行窗口变化的监听相关推荐

最新文章

热门文章