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;
        }
    },
相关推荐
源码获取_wx:Fegn08951 小时前
基于springboot + vue心理健康管理系统
vue.js·spring boot·后端
韩立学长1 小时前
【开题答辩实录分享】以《基于Vue的非遗文化知识分享平台的设计与实现》为例进行选题答辩实录分享
前端·javascript·vue.js
优弧1 小时前
离开舒适区100天,我后悔了吗?
前端·后端·面试
胡gh1 小时前
css的臂膀,前端动效的利器,还是布局的“隐形陷阱”?
前端·css·html
灵感菇_1 小时前
Flutter Riverpod 完整教程:从入门到实战
前端·flutter·ui·状态管理
用户21411832636021 小时前
紧急修复!Dify CVE-2025-55182 高危漏洞,手把手教你升级避坑
前端
前端 贾公子2 小时前
Vue响应式原理学习:基本原理
javascript·vue.js·学习
飛6792 小时前
从 0 到 1 掌握 Flutter 状态管理:Provider 实战与原理剖析
开发语言·javascript·ecmascript
Vic101012 小时前
解决 Spring Security 在异步线程中用户信息丢失的问题
java·前端·spring
源码获取_wx:Fegn08952 小时前
基于springboot + vue二手交易管理系统
java·vue.js·spring boot·后端·spring·课程设计