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 ...
随机推荐
- 利用pcl数据结构,实现RegionGrowing的复现
这篇博客是pcl中区域增长的算法进行简介以实现重写,并添加了一些判断条件. 起初原因是在使用pcl封装的regionGrowing时,效果不太好. 于是想自己重新写一下,通过改变其中种子点的生成策略和 ...
- Python自学笔记之计算机基础
osi七层协议应用层-表示层-会话层-传输层-网络层-数据链路层-物理层 无线网协议 ethernet 物理层:网线,光纤 数据链路层:arp协议 mac地址,广播 在广播域内传播 网络层:ip地址标 ...
- php多域名单站点路由
能够使多域名但是只有一个站点的小站,通过路由访问到各个指定目录 <?php //域名跳转路由 //默认跳转 $default = "http://www.stanwind.com/in ...
- docker安装教程-centos
Docker 要求CentOS 系统的内核版本在3.10以上,查看本页面的前提条件来验证你的CentOS 版本是否支持Docker . 1.通过uname -r 命令查看你当前的内核版本 uname ...
- 19.AutoMapper 之开放式泛型(Open Generics)
https://www.jianshu.com/p/ce4c7e291408 开放式泛型(Open Generics) AutoMapper可以支持开放式泛型的映射.为开放式泛型创建映射: publi ...
- Git 生成.gitinore忽略文件
Git 生成.gitinore忽略文件 CD到指定目录下: touch .gitinore .gitinore忽略文件 三种方法: # 以'#'开始的行,被视为注释.(#是注释的意思) # 忽略掉所 ...
- 【maven】IDEA:存在jar包,pom.xml文件没报错,但是Maven-Project-Dependencies有红线报错
1.这个问题很简单 把pom.xml里这些出错的jar包的引用先删除,再刷新一次,再添上,就行了 2.大概是idea有点反应迟钝
- linux下mysql5.7的MHA高可用架构搭建
一.MHA简介 MHA(Master High Availability)目前在mysql高可用方面比较成熟.是一套优秀的作为 mysql高可用性环境下故障切换和主从提升的高可用软件.在MySQL故障 ...
- Big Data(七)MapReduce计算框架
二.计算向数据移动如何实现? Hadoop1.x(已经淘汰): hdfs暴露数据的位置 1)资源管理 2)任务调度 角色:JobTracker&TaskTracker JobTracker: ...
- Spring Framework Part2 IOC
spring serious of blog edit by 马士兵教育 IoC概念 IoC是一个概念,是一种思想,其实现方式多种多样.当前比较流行的实现方式之一是DI. 基于XML的DI Appli ...