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;
        }
    },
相关推荐
小桥风满袖2 分钟前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js
Rubin932 分钟前
埋点方案实现
前端
斯~内克7 分钟前
Centrifugo 深度解析:构建高性能实时应用的开源引擎
前端·开源
tianchang18 分钟前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范
best66621 分钟前
JavaScript的Math内置对象,到底是何方神圣?
javascript
掘金安东尼26 分钟前
技术解析:高级 Excel 财务报表解析器的架构与实现
前端·javascript·面试
Hilaku28 分钟前
深入CSS层叠的本质:@layer如何优雅地解决样式覆盖与!important滥用问题
前端·css·html
天天扭码31 分钟前
AI时代,前端如何处理大模型返回的多模态数据?
前端·人工智能·面试
每天开心33 分钟前
一文教你掌握事件机制
前端·javascript·ai编程
LeeAt40 分钟前
真的!真的就一句话就能明白this指向问题
前端·javascript