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. 小白学习django第三站-自定义过滤器及标签

    要使用自定义过滤器和标签,首先要设置好目录结构 现在项目目录下建立common的python包 再将common加入到setting.py中的INSTALLED_APP列表中 在common创建目录t ...

  2. java 线程池 - ThreadPoolExecutor

    1. 为什么要用线程池 减少资源的开销 减少了每次创建线程.销毁线程的开销. 提高响应速度 ,每次请求到来时,由于线程的创建已经完成,故可以直接执行任务,因此提高了响应速度. 提高线程的可管理性 ,线 ...

  3. MySQL第二讲 一一一一 MySQL语句进阶

    通过命令来备份数据库: 通过数据库软件里面的,mysqldump模块来操作,如下: mysqldump -u root db1 > db1.sql -p; //没有-d就是备份的时候:数据表结构 ...

  4. python 服务器 cpu 监控程序--转

    后台 py 代码 app.py ''' 服务器cpu监控程序 思路:后端后台线程一旦产生数据,即刻推送至前端. 好处:不需要前端ajax定时查询,节省服务器资源. 作者:hhh5460 时间:2017 ...

  5. js 带有返回值的 匿名方法

    //可以给 permissionField返回'a,b,c'这样的以逗号分隔的字符串 permissionField:(function(){ var arr = []; $("input[ ...

  6. 深入理解Java的反射机制

    https://blog.csdn.net/u012585964/article/details/52011138 http://www.importnew.com/20339.html 一,java ...

  7. 2019-11-29-win10-uwp-如何开始写-uwp-程序

    title author date CreateTime categories win10 uwp 如何开始写 uwp 程序 lindexi 2019-11-29 10:12:42 +0800 201 ...

  8. Linux之RedHat7如何更换yum源

    目前,我们常见的系统大概就是Windows.Linux和Mac OS了.Windows系统应该是大部分人最早开始接触的系统,毕竟Windows系统使用起来相当方便,只需要点点鼠标,外加会简单的打字,一 ...

  9. HB-打包

    一.文件打包 1.上传文件到根目录下 2.修更改启动文件 3.更改启动图标 四.启动图 https://www.yasuotu.com/size 480*762 720*1242 1080*1882

  10. vim 添加显示和行号

    方法一: 1.显示当前行行号,在VI的命令模式下输入 :nu 2.显示所有行号,在VI的命令模式下输入 :set nu :set nonu 关闭 方法二: 使用vi编辑~/.vimrc文件,在该文件中 ...