Vue 获取/设置指定组件高度

'split-pane-left-area'是要获取的组件class,可以通过浏览器F12调试,在样式页面查看class信息

目的:将div的高度设置和split-pane-left-area 组件的高度一致

  1. 动态绑定style
js 复制代码
<div  :style="{height: listHeight+ 'px'}">
  1. 获取元素高度:通过document.getElementsByClassName,offsetHeight属性即为页面组件的高度
js 复制代码
<div  :style="{height: listHeight+ 'px'}">

data() {
        return {
            listHeight: 565,
        };
    },

mounted() {
        // 动态绑定审核方案列表高度,确保显示不会超出页面范围
        if (document.getElementsByClassName('split-pane-left-area')[0].offsetHeight) {
            this.listHeight = document.getElementsByClassName('split-pane-left-area')[0].offsetHeight - 30;
        }
    },
相关推荐
Tapir13 小时前
被 Karpathy 下场推荐的 NanoClaw 是什么来头
前端·后端·github
前端人类学13 小时前
深入解析JavaScript中的null与undefined:区别、用法及判断技巧
前端·javascript
ssshooter14 小时前
Tauri 项目实践:客户端与 Web 端的授权登录实现方案
前端·后端·rust
兆子龙15 小时前
【React】19 深度解析:掌握新一代 React 特性
前端·架构
Moment15 小时前
MinIO已死,MinIO万岁
前端·后端·github
无双_Joney15 小时前
心路散文 - 转职遇到AI浪潮,AIGC时刻人的价值是什么?
前端·后端·架构
有意义15 小时前
深度拆解分割等和子集:一维DP数组与倒序遍历的本质
前端·算法·面试
卤蛋fg615 小时前
vxe-table 如何实现分组列头折叠列功能
vue.js
小怪点点15 小时前
vue3使用
前端·vue.js
进击的尘埃15 小时前
Vitest 自定义 Reporter 与覆盖率卡口:在 Monorepo 里搞增量覆盖率检测
javascript