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;
        }
    },
相关推荐
小李子呢021112 小时前
前端八股Vue(5)---v-if和v-show
前端·javascript·vue.js
yuki_uix12 小时前
跨域与安全:CORS、HTTPS 与浏览器安全机制
前端·面试
用户31532477954513 小时前
React19项目中 FormEdit / FormEditModal 组件封装设计说明
前端·react.js
陆枫Larry13 小时前
Git 合并冲突实战:`git pull` 失败与 `pull.ff=only` 的那些事
前端
江南月13 小时前
让智能体边想边做:从 0 理解 ReActAgent 的工作方式
前端·人工智能
YiuChauvin13 小时前
vue2中使用 AntV G6
javascript·vue.js
袋鱼不重13 小时前
Hermes Agent 安装与实战:从安装到与 OpenClaw 全方位对比
前端·后端·ai编程
汉秋13 小时前
iOS 自定义 UICollectionView 拼图布局 + 布局切换动画实践
前端
江南月13 小时前
让智能体学会自我改进:从 0 理解 ReflectionAgent 的迭代优化
前端·人工智能