vue动态监听浏览器窗口高度
HTML:
<div ref="page"></div>
JS:
data(){
return{
clientHeight:'',
}
}
mounted(){
this.clientHeight = `${document.documentElement.clientHeight}`;//获取浏览器可视区域高度
let that = this;
window.onresize = function(){
this.clientHeight = `${document.documentElement.clientHeight}`;
if(that.$refs.page){
that.$refs.page.style.minHeight = clientHeight - + 'px';
}
}
}
watch:{
clientHeight(){ //如果clientHeight 发生改变,这个函数就会运行
this.changeFixed(this.clientHeight)
}
}
methods:{
changeFixed(clientHeight){
if(this.$refs.page){
this.$refs.page.style.minHeight = clientHeight - + 'px';
}
}
}
vue动态监听浏览器窗口高度的更多相关文章
- vue监听浏览器窗口的变化,随着窗口变化调整里面table的宽高
1.在data中设置: tableHeight:"500", screenHeight:window.innerHeight, 2.在mounted中设置: mounted() { ...
- 用jQuery监听浏览器窗口的变化
$(window).resize(function () { //当浏览器大小变化时 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(docume ...
- vue监听浏览器窗口大小变化
首先,页面初始化mounted的时候,通过 document.body.clientWidth 和 document.body.clientHeight 来获取到浏览器的宽和高,然后通过 window ...
- vue---监听浏览器窗口的宽度
使用VUE开发后台项目,后台项目需要进行后台根据浏览器窗口进行变化,需要使用vue来监听浏览器的窗口变化. <template> <div class="conte ...
- js监听浏览器tab窗口切换
js监听浏览器tab窗口切换 ——IT唐伯虎 摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) { document.addEventLis ...
- vue JS实现监听浏览器返回按键事件
// 这个是监听浏览器回退键的returnButton () { let vm = this; $(document).ready(function () { if (window.history & ...
- 详解vuex结合localstorage动态监听storage的变化
这篇文章主要介绍了详解vuex结合localstorage动态监听storage的变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 需求:不同组件间共用同一数据,当一个 ...
- JS实时监听浏览器宽度的变化
boot:function(){ //加载页面时执行一次 changeMargin(); //监听浏览器宽度的改变 window.onresize = function(){ changeMargin ...
- js动态监听dom变化
原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀 var MutationObserver = window.MutationO ...
随机推荐
- 【7.9校内test】T2 极值问题
这个题真的,毫无思路的说,但是我们会打表啊: lz的打表之路: 当然是手写一个暴力啦(*^▽^*)! 然后滚去配置lemon测试一下暴力可以得多少分qwq: 是的40分呢! 然后其实看上面也能看出来一 ...
- MFC,QT与WinForm,WPF简介
编程语言的组成编程语言做为一种语言自然和英语这些自然语言有类似的地方.学英语时我们知道要先记26个字母,然后单词及其发音,接下来就是词组,句子.反正简单的说就是记单词,熟悉词法,句法.接下来就是应用了 ...
- 用Python制作动态二维码
参考来源链接:https://mp.weixin.qq.com/s/p-ptQZD6_bjUhmU822OPww 今天在最大的同性交友社区GitHub上发现了一个比较有意思的项目,无论你是什么操作系统 ...
- Python:什么是进阶,如何进阶?
目录 Python:什么是进阶,如何进阶? 1. 什么是进阶? 2. 如何进阶? 3. 除此之外呢? Python:什么是进阶,如何进阶? 1. 什么是进阶? 一门编程语言的基础部分,往往非常简单.如 ...
- kafka 教程(一)-初识kafka
消息队列 MQ 消息队列就是 消息 message 加 队列 queue,是一种消息传输的容器,提供生产和消费 API 来存储和获取消息. 消息队列分两种:点对点(p2p).发布订阅(pub/sub) ...
- PostgreSQL-优化之分表
分表概述 数据库分表,就是把一张表分成多张表,物理上虽然分开了,逻辑上彼此仍有联系. 分表有两种方式:水平分表,即按列分开:垂直分表,即按行分开 优势 1. 查询速度大幅提升 2. 删除数据速度更快 ...
- 08.AutoMapper 之嵌套映射(Nested Mappings)
https://www.jianshu.com/p/013715d2352d 嵌套映射(Nested Mappings) 当映射引擎执行映射时,它可以使用各种方法之一来解析目标成员值.其中一种方法 ...
- crm---本项目的权限控制模式
一:url权限: 最底层的权限控制,,缺点在与没有预判的机制,造成客户体验下降. 前提: 为controller中的每一个方法(即资源)定义一个资源(Resource)名称,,该 ...
- 剑指offer-3:跳阶梯
三.跳台阶 题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 分析 青蛙每一次跳跃只有两种选择:一是再跳1级阶梯到达第n ...
- Chrome之谷歌插件开发
最近碰到一个需求,需要在某个平台上批量的添加好友,如果是人工点击,可以操作,但是效率并不高,人工成本较高.就打算使用浏览器插件的方式来完成这件重复性的工作. 介绍: Chrome插件的本质就是一个由 ...