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

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

原文章路径：[原文章][Link 1]

这里用到了jquery，需要引入jquery依赖，当然也可以直接进行dom操作

HTML代码：

<template>
      <div class="hello" ref="homePage">//设置最外层div的ref属性
      
       </div>
    </template>

JS：

<script>
      export default {
        data(){
          return {
            clientHeight:'',
          }
        },
        mounted(){
          this.initHeight();
        },
        watch: {
          // 如果 `clientHeight` 发生改变，这个函数就会运行
          clientHeight: function () {
            this.changeFixed(this.clientHeight)
          }
        },
        methods:{
          changeFixed(clientHeight){                        //动态修改样式
            //console.log(clientHeight);
            this.$refs.homePage.style.height = clientHeight+'px';
    
          },
           initHeight(){  //获取高度
                //获取浏览器可视区域高度
                this.clientHeight = $(document).height();
                // console.log($(document).height());//浏览器可视区域对象宽度
                window.onresize = () => {  //当窗口或框架发生改变时触发
                //console.log("onresize进来了");
                  this.clientHeight = $(document).height();
                };
            }
        }
      }
    </script>

[Link 1]: https://blog.csdn.net/jerrica/article/details/80669038

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关获取浏览器可视区域宽高

1 / 2 获取浏览器可视区域宽度 3 / 4 function getViewPortOffset() { 5

桃扇骨/ 2023年06月05日 12:59/ 0 赞/ 124 阅读

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

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

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

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

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

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

相关动态设置Cell的高度

\- (UITableViewCell \)tableView:(UITableView \)tableView cellForRowAtIndexPath:(NSIndexP

约定不等于承诺〃/ 2022年08月09日 18:42/ 0 赞/ 262 阅读

相关动态设置label的高度

UILabel \contentLabel=\[\[UILabel alloc\] initWithFrame:\_frame\]; CGRect frame=content

曾经终败给现在/ 2022年08月09日 14:38/ 0 赞/ 296 阅读

相关 iview table高度动态设置

iview table高度动态设置在使用iview table表格组件的时候，由于我的屏幕分辨率比较大，在自己pc机上设置的固定高度很适合，在测试（tes

- 日理万妓/ 2022年06月02日 02:24/ 0 赞/ 350 阅读

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

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

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

相关 JavaScript获取屏幕可视区域的高度

开发工具与关键技术：DW/浏览器； JavaScript。作者：刘佳明撰写时间：2019年 2 月 17 日本篇为大家简单阐述编程使如何让页面的窗口高度随着屏

悠悠/ 2022年03月19日 14:14/ 0 赞/ 595 阅读

相关 js设置iframe子页面中div高度

首先给出一个结论： div节点高度要实现百分比，其父节点必须要有确定的高度。所以在body节点下的子节点若想要用百分比来确定高度时，就必须给body给定一个高度。举一个实

一时失言乱红尘/ 2021年06月22日 15:36/ 0 赞/ 705 阅读