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 ...
随机推荐
- c语言小技巧:C语言学习笔记之位运算求余
我们都知道,求一个数被另一个数整除的余数,可以用求余运算符”%“,但是,如果不 允许使用求余运算符,又该怎么办呢?下面介绍一种方法,是通过位运算来求余,但是注 意:该方法只对除数是2的N次方幂时才有效 ...
- mysql文本后面带换行符导致查询不到
UPDATE tablename SET FIELD = REPLACE(REPLACE(FIELD, CHAR(10), ''), CHAR(13), ''); CHAR(10): 换行符 CH ...
- python 抓取拉勾网 攻略
废话不多说,直接上代码,将数据存入Mongdb import requests import pymongo import time import random mycon = pymongo.Mon ...
- Eclipse 配置 tomcat
1.第一步 去官网下载 进入点击 Downloads 点击如图位置下载 我下载的是 apache-tomcat-7.0.82.zip(图片中不是,但都是一样的) 我解压到D:\tomcat\apach ...
- Delphi 指令符
- 关于 Google 公司的一些趣闻
简评: 很少有科技公司能像 Google 一样象征着这个数字时代,你知道 Google,但不一定知道以下这些有趣数据.这些来自 VizionOnline 的数据概述了不为人知的 Google 趣闻,分 ...
- java面试(反射)05
1.什么是反射 JAVA反射机制是在运行状态中,对于任意一个类,都能够获取这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取类信息以及动态调用对象内容就称为jav ...
- Spring加载资源文件的方式
UrlResource 封装了java.net.URL,它能够被用来访问任何通过URL可以获得的对象,例如:文件.HTTP对象.FTP对象等.所有的URL都有个标准的 String表示,这些标准前缀可 ...
- pro git学习笔记
- 微信支付之扫码支付、公众号支付、H5支付、小程序支付相关业务流程分析总结
前言 很久以来,一直想写一篇微信支付有关的总结文档:一方面是总结自己的一些心得,另一方面也可以帮助别人,但是因种种原因未能完全理解透彻微信支付的几大支付方式,今天有幸做一些总结上的文章,也趁此机会,将 ...