Vue 动态获取可视区高度,Vue监听窗口变化

小灰灰 2023-02-16 04:22 56阅读 0赞

链接：https://www.jianshu.com/p/37c73afb678b

<div class="allposition_qw_content" ref="qwcontent" ></div>
    data() 
        return{
            fullHeight: '',//fullHeight: document.documentElement.clientHeight  屏幕高度 默认值
            }
        },
    
    methods: {
            changeFixed(fullHeight){                        //动态修改样式
                this.$refs.qwcontent.style.height =( 0.91*fullHeight - 200)+'px';
            }
        },
    
    mounted() {
          this.fullHeight= `${document.documentElement.clientHeight}`;//默认值
          const that = this
          window.onresize = () => {
            return (() => {
              window.fullHeight = document.documentElement.clientHeight
              that.fullHeight = window.fullHeight
            })()
          }
        },
    
    watch: {
          // 如果 `fullHeight ` 发生改变，这个函数就会运行 
          fullHeight :function(val) {
            if(!this.timer) {
              this.fullHeight = val
              this.changeFixed(this.fullHeight)
              console.log(val)
              this.timer = true
              let that = this
              setTimeout(function (){//频繁触发 resize 函数，会导致页面很卡
                that.timer = false
              },100)
            }
          }
      }

发表评论取消回复

表情：

评论列表（有 0 条评论，56人围观）

还没有评论，来说两句吧...

相关阅读

相关 021：vue中watch监听页面变化动态设置iframe元素的高度

![在这里插入图片描述][32d2a1d099334cfba6adc4f84dd79e22.png_pic_center] 第021个查看专栏目录: [VUE][] —

ゞ浴缸里的玫瑰/ 2024年03月16日 20:35/ 0 赞/ 158 阅读

相关 037：vue项目监听页面变化，动态设置iframe元素高度

![在这里插入图片描述][32d2a1d099334cfba6adc4f84dd79e22.png_pic_center] 第037个查看专栏目录: [VUE][] \-

朴灿烈づ我的快乐病毒、/ 2024年03月02日 09:41/ 0 赞/ 169 阅读

相关 vue监听浏览器窗口大小变化

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

冷不防/ 2023年03月03日 13:25/ 0 赞/ 78 阅读

相关 vue实时监听窗口宽度变化

【自适应】向来是前端工程师需要解决的一大问题——即便作为当今非常火热的vue框架，也无法摆脱——虽然elementui、iview等开源UI组件库层出不穷，但官方库毕竟不可能满

客官°小女子只卖身不卖艺/ 2023年02月17日 13:25/ 0 赞/ 69 阅读

相关 Vue 动态获取可视区高度,Vue监听窗口变化

链接：https://www.jianshu.com/p/37c73afb678b <div class="allposition_qw_content" ref=

小灰灰/ 2023年02月16日 04:22/ 0 赞/ 57 阅读

相关 VUE_vue监听路由变化

方法一：通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ cons

小鱼儿/ 2023年01月14日 01:41/ 0 赞/ 268 阅读

相关 Vue - 实时监听浏览器窗口宽高变化

前言有时页面需要根据浏览器宽高进行样式或逻辑的变化，这时候就需要实时获取浏览器窗口宽高。解决方案在生命周期钩子函数 `mounted()` 中通过 `d

冷不防/ 2022年10月17日 04:18/ 0 赞/ 616 阅读

相关 [javascript] js 获取页面可视区高度和滚动条高度

获取可视区高度： var clientHeight = document.documentElement.clientHeeight ;

分手后的思念是犯贱/ 2022年08月11日 00:48/ 0 赞/ 347 阅读

相关 vue-cli中动态设置页面可视区域高度

原文章路径：[原文章][Link 1] 这里用到了jquery，需要引入jquery依赖，当然也可以直接进行dom操作 HTML代码： <template>

淩亂°似流年/ 2022年05月20日 08:28/ 0 赞/ 322 阅读

相关 vue 监听屏幕变化

1、防抖 npm install lodash.debounce -save-dev 2、在main.js写上如下代码 const windowResiz

偏执的太偏执、/ 2021年10月19日 07:54/ 0 赞/ 602 阅读