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'
}
},
vue中进行窗口变化的监听的更多相关文章
- vue中给window添加滚动监听无效的解决方案
原文链接: 点我 页面中有这么一个需求,当页面滚动到一定高度之后,页面中的某些元素进行吸顶,固定到顶部位置,或者是滚动到一定程度进行更新数据的操作.我相信不少网友查阅过类似的资料,网友给出的解决方案, ...
- 关于Vue中,使用watch同时监听两个值的实现方法
1. 先在computed中,用需要监听的两个值(start.end)定义一个对象(dateRange) computed: { dateRange () { const { start, end } ...
- React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路
React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路 这几天在忙着把自己做的项目中的类组件转化为功能相同的函数组件,首先先贴一份该组件类组件的关 ...
- vue2.x版本中Object.defineProperty对象属性监听和关联
前言 在vue2.x版本官方文档中 深入响应式原理 https://cn.vuejs.org/v2/guide/reactivity.html一文的解释当中,Object.defineProperty ...
- Android中Button的五种监听事件
简单聊一下Android中Button的五种监听事件: 1.在布局文件中为button添加onClick属性,Activity实现其方法2.匿名内部类作为事件监听器类3.内部类作为监听器4.Activ ...
- JavaEE开发之Spring中的事件发送与监听以及使用@Profile进行环境切换
本篇博客我们就来聊一下Spring框架中的观察者模式的应用,即事件的发送与监听机制.之前我们已经剖析过观察者模式的具体实现,以及使用Swift3.0自定义过通知机制.所以本篇博客对于事件发送与监听的底 ...
- PIE SDK栅格图层渲染变化事件监听
1. 功能简介 通过PIE SDK加载图层后,会默认的赋值给数据一个渲染.当用户重新给数据赋值Render或改变数据显示效果时,会触发渲染变化事件. 所谓的事件监听是在事件触发时,将执行用户指定的函数 ...
- Android TV开发中所有的遥控器按键监听及注意事项,新增home键监听
原文:Android TV开发中所有的遥控器按键监听及注意事项,新增home键监听 简单记录下android 盒子开发遥控器的监听 ,希望能帮到新入门的朋友们 不多说,直接贴代码 public cla ...
- Vue学习之vue中的计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Nginx——请求head被过滤
前言 nginx代理服务器,app发出的请求头被直接过滤了,当时想到nginx会自动过滤掉带有_的请求头信息,所以直接改了Nginx的配置当然也可以将app的request中header中的_改为- ...
- NOIP 2008 笨小猴
洛谷 P1125 笨小猴 洛谷传送门 JDOJ 1539: [NOIP2008]笨小猴 T1 JDOJ传送门 Description 笨小猴的词汇量很小,所以每次做英语选择题的时候都很头疼.但是他找到 ...
- matlab-fsolve函数求解多元非线性方程
记录一下代码,方便下次套用模板 options=optimset('MaxFunEvals',1e4,'MaxIter',1e4); [x,fval,exitflag] = fsolve(@(x) m ...
- Datagrip 2017.2 激活
解决方法 参考网址:https://jetbrains-server.ru/2017/03/31/datagrip-2016-2017-activation/page/2/ 亲测使用http://id ...
- xsxs
import subprocess compilePopen = subprocess.Popen('gcc haha',shell=True,stderr=subprocess.PIPE) comp ...
- docker 学习操作记录 5-1
记录5-1 [BEGIN] // :: Connecting to ... Connection established. To escape to local shell, press Ctrl+A ...
- Java8 新特性 默认方法
默认方法为什么出现 默认方法的出现是因为在java8设计的过程中,因为加入了Lamdba表达式,和函数式接口,所以在非常多的接口里面要加入新的方法,但是如果在接口里面直接加入新的方法,那么以前写的所有 ...
- 管道通信——FIFO的代码实现
一.用到的函数 umask linux中的 umask 函数主要用于:在创建新文件或目录时 屏蔽掉新文件或目录不应有的访问允许权限. 文件的访问允许权限共有9种,分别是 ...
- [转帖]JVM性能调优详解
JVM性能调优详解 https://www.cnblogs.com/secbro/p/11833651.html 应该是 jdk8 以前的方法 貌似permsize 已经放弃这一块了. 前面我们学习了 ...
- 【Python】处理Excel的库Xlwings
# # 引入库 import xlwings as xw import time # 打开Excel程序,默认设置:程序可见,只打开不新建工作薄 # app = xw.App(visible=True ...