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;
        }
    },
相关推荐
HarderCoder2 分钟前
ByAI:Rect-redux实现及connect函数
前端·react.js
小张快跑。4 分钟前
【Vue3】(三)vue3中的pinia状态管理、组件通信
前端·javascript·vue.js
我想说一句4 分钟前
当 map 遇上 parseInt:JS 中一场参数引发的“血案”
前端·javascript·面试
陈随易5 分钟前
2025年100个产品计划之第12个(杰森排序) - 对 JSON 属性进行排序
前端·后端·程序员
LeeAt5 分钟前
《谁杀死了比尔?》:使用Trae完成的一个推理游戏项目!!
前端·游戏开发·trae
三气归来7 分钟前
2. 内置模块之http模块
javascript·后端
FogLetter7 分钟前
🧙‍♂️ 魔法笔记:JavaScript 词法作用域与闭包的神秘世界
javascript·后端
Hockor9 分钟前
写给前端的 Python 教程四(列表/元组)
前端·后端·python
GetcharZp10 分钟前
「DPlayer」超强弹幕视频播放器来了!支持m3u8直播,5分钟搞定集成!
前端
一颗奇趣蛋13 分钟前
vue性能优化(响应数据&静态数据)
vue.js·性能优化