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动态监听浏览器窗口高度的更多相关文章

  1. vue监听浏览器窗口的变化,随着窗口变化调整里面table的宽高

    1.在data中设置: tableHeight:"500", screenHeight:window.innerHeight, 2.在mounted中设置: mounted() { ...

  2. 用jQuery监听浏览器窗口的变化

    $(window).resize(function () { //当浏览器大小变化时 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(docume ...

  3. vue监听浏览器窗口大小变化

    首先,页面初始化mounted的时候,通过 document.body.clientWidth 和 document.body.clientHeight 来获取到浏览器的宽和高,然后通过 window ...

  4. vue---监听浏览器窗口的宽度

    使用VUE开发后台项目,后台项目需要进行后台根据浏览器窗口进行变化,需要使用vue来监听浏览器的窗口变化. <template>     <div class="conte ...

  5. js监听浏览器tab窗口切换

    js监听浏览器tab窗口切换 ——IT唐伯虎 摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) {  document.addEventLis ...

  6. vue JS实现监听浏览器返回按键事件

    // 这个是监听浏览器回退键的returnButton () { let vm = this; $(document).ready(function () { if (window.history & ...

  7. 详解vuex结合localstorage动态监听storage的变化

    这篇文章主要介绍了详解vuex结合localstorage动态监听storage的变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 需求:不同组件间共用同一数据,当一个 ...

  8. JS实时监听浏览器宽度的变化

    boot:function(){ //加载页面时执行一次 changeMargin(); //监听浏览器宽度的改变 window.onresize = function(){ changeMargin ...

  9. js动态监听dom变化

    原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀   var MutationObserver = window.MutationO ...

随机推荐

  1. PHP常见数组排序方法小结

    1.简单数组排序 sort() 函数和rsort() 函数: 语法规则: bool sort(array &array [,int sort_flags] bool rsort(array & ...

  2. Servlet监听器——实现在线登录人数统计小例子

    一.概念 servlet监听器的主要目的是给web应用增加事件处理机制,以便更好的监视和控制web应用的状态变化,从而在后台调用相应处理程序. 二.监听器的类型 1.根据监听对象的类型和范围,分为3类 ...

  3. cherrypy

    十多年来,Web 程序设计人员一直使用 CGI 将应用程序连接到 Web 服务器和另一端的 Web 浏览器.有很多理由建议使用 CGI:它可以与任何编程语言一起使用,并且它在 Web 服务器和宿主服务 ...

  4. String,StringBuilder和StringBuffer

    String 字符串常量,由String创建的字符内容,长度是不可改变,存放字符的数组被声明为final. 实际上String类操作字符串是通过建立一个StringBuffer,然后调用append( ...

  5. zabbix布置mysql主从监控

    一.下载安装zabbix服务器端 网址:https://www.cnblogs.com/carriezhangyan/p/10818513.html 二.下载安装zabbix客户端,客户端上要有mys ...

  6. 01.LNMP架构-Nginx源码包编译部署详细步骤

    操作系统:CentOS_Server_7.5_x64_1804.iso 部署组件:Pcre+Zlib+Openssl+Nginx 操作步骤: 一.创建目录 [root@localhost ~]# mk ...

  7. TensorRT 介绍

    引用:https://arleyzhang.github.io/articles/7f4b25ce/ 1 简介 TensorRT是一个高性能的深度学习推理(Inference)优化器,可以为深度学习应 ...

  8. 01Java经典问题

    1.利用Dos输出hello world 建立一个Test.java文件,放在e盘: public class Test{ public static void main(String[] args) ...

  9. mysql查看库、表占用存储空间大小

    http://blog.csdn.net/bzfys/article/details/55252962 1. 查看该数据库实例下所有库大小,得到的结果是以MB为单位 <span class=&q ...

  10. 第05课:GDB常用命令详解(中)

    本科核心内容: info和thread命令 next.step.util.finish和return命令 5.1info和thread命令 在前面使用info break命令查看当前断点时介绍过,in ...