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;
        }
    },
相关推荐
少卿15 分钟前
React Compiler 完全指南:自动化性能优化的未来
前端·javascript
广州华水科技16 分钟前
水库变形监测推荐:2025年单北斗GNSS变形监测系统TOP5,助力基础设施安全
前端
快起来搬砖了17 分钟前
Vue 实现阿里云 OSS 视频分片上传:安全实战与完整方案
vue.js·安全·阿里云
广州华水科技17 分钟前
北斗GNSS变形监测一体机在基础设施安全中的应用与优势
前端
七淮19 分钟前
umi4暗黑模式设置
前端
8***B19 分钟前
前端路由权限控制,动态路由生成
前端
爱隐身的官人26 分钟前
beef-xss hook.js访问失败500错误
javascript·xss
军军3601 小时前
从图片到点阵:用JavaScript重现复古数码点阵艺术图
前端·javascript
znhy@1231 小时前
Vue基础知识(一)
前端·javascript·vue.js
terminal0071 小时前
浅谈useRef的使用和渲染机制
前端·react.js·面试