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 ...
随机推荐
- haproxy 配置文件详解 之 WEB监控平台
HAProxy 虽然实现了服务的故障转移,但是在主机或者服务出现故障的时候,并不能发出通知告知运维人员,这对于及时性要求很高的业务系统来说,是非常不便的,不过,HAProxy 似乎也考虑到了这一点,在 ...
- [原创]Emmagee V2.4工具使用介绍
[原创]Emmagee V2.4工具使用介绍 1 Emmagee 介绍 Emmagee 是网易杭州研究院 QA团队开发的一款简单易上手的Android性能监控App,主要用于监控单个App的CPU.内 ...
- matlab 彩色图像转化成灰度图像,灰度图像降低灰度级
灰度级数k,k=2^b,称该图像为b比特图像. 降低灰度级数是靠2的幂次方 网上代码:https://blog.csdn.net/silence2015/article/details/6892736 ...
- Gamma阶段事后分析
设想和目标 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们的软件要解决的是安卓游戏的自动化异常检测问题,定义的足够清楚,对于典型用户的描述和典型场景的描述也足 ...
- 【K8S】helm chart多环境部署最佳实践-示例
Chart.yaml apiVersion: v1 appVersion: "1.0" description: A Helm chart for Kubernetes name: ...
- eclipse&myeclipse 生成jar包后,spring无法扫描到bean定义
问题:eclipse&myeclipse 生成jar包后,spring无法扫描到bean定义 在使用getbean或者扫包时注入bean失败,但在IDE里是可以正常运行的? 原因:导出jar未 ...
- spring boot2X整合nacos一使用Feign实现服务调用
服务调用有两种方式: A.使用RestTemplate 进行服务调用 查看 B.使用Feign 进行声明式服务调用 上一次写了使用RestTemplate的方式,这次使用Feign的方式实现 服务注册 ...
- (转)解决mybatis的mapper.xml查询不出数据,结果一直为null问题
背景:记录mybatis使用过程中遇到的相关问题. 解决mybatis的mapper.xml查询不出数据,结果一直为null问题 解决方案: 1 修改实体类与数据库字段名相同 2 修改sql查询语句, ...
- 在电脑上远程连接你的 云服务器( ECS)
在与服务器上一般安装的主流操作系统 linux 和 windowsServer linux一般都是centOs系列 这个主要是连接windowsServer 系统 用xshell ,win ...
- 递推 + 高精度 --- Tiling
Tiling Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7264 Accepted: 3528 Descriptio ...