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. 【6.10校内test】 noip模拟

    题目链接: p1  FBI树 p2  医院设置 p3  加分二叉树 | | | | | | 分 界 线 | | | | | | 应该算是一篇反思博. 对于OI,我真的算不上是热爱(当然不热爱不代表就不 ...

  2. RegexKitLite库的使用

    首先在官网:  http://regexkit.sourceforge.net/下载RegexKitLite.h和RegexKitLite.m两个文件 将其添加到工程目录下 取消自动引用计数ARC 手 ...

  3. 深入解析Vue.js中v-bind v-model的使用和区别

    v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据 ...

  4. [.net core]6.launchSettings.json,调试配置

    展开properties, 双击查看内容, { "iisSettings": { "windowsAuthentication": false, "a ...

  5. Homebrew学习(二)之安装、卸载、更新

    安装 1.网上的安装方法都是用curl,从官网找到命令复制到终端,然后回车,结果报错请求超时 /usr/bin/ruby -e "$(curl -fsSL https://raw.githu ...

  6. vue-搜索功能-实时监听搜索框的输入,N毫秒请求一次数据

    <template> <div class="search-box"> <input class="box" :placehold ...

  7. echarts 给legend图例加个标题式文字设置为普通文本不可点击

    legend: [ { orient: "horizontal", // 'vertical' x: "68%", // 'center' | 'left' | ...

  8. MATLAB中的函数句柄及其应用

    1.函数句柄的创建 函数句柄(function handle)是MATLAB中的一类特殊的数据结构,它的地位类似于其它计算机语言里的函数对象(Javascript,Python),函数指针(C++), ...

  9. DSP学习资料:基于6U VPX的 XC7VX690T+C6678的双FMC接口雷达通信处理板

    基于6U VPX的 XC7VX690T+C6678的双FMC接口雷达通信处理板   一.板卡概述 高性能VPX信号处理板基于标准6U VPX架构,提供两个标准FMC插槽,适用于电子对抗或雷达信号等领域 ...

  10. 286-基于6U VPX 的mSATA高性能数据存储板

    基于6U VPX 的mSATA高性能数据存储板 一.板卡概述 该产品系我司自主研发.基于标准6U VPX架构. 二.产品特性       最大存储容量8TB        读写方式RAID0 ,读写速 ...