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;
        }
    },
相关推荐
GISer_Jing几秒前
从前端到AI Agent工程师:技能升级与职业跃迁指南
前端·人工智能·ai编程
yqcoder2 分钟前
遍历的艺术:深入解析 for, for...in, for...of 的核心区别
前端·javascript
IT_陈寒14 分钟前
SpringBoot这个事务回滚的坑我算是踩明白了
前端·人工智能·后端
恋猫de小郭15 分钟前
Jetbrains 官宣正式发布 KMP 全新默认项目结构,向着 Amper 靠近
android·前端·flutter
xiaoxue..17 分钟前
详解:useMemo 和useCallback
前端·react.js·面试
hexu_blog21 分钟前
前端vue3后端springboot如何实现图片压缩-免费无限制压缩
前端·java压缩图片·vue压缩图片·批量压缩图片
guslegend29 分钟前
第11节:前端 UI 设计与前端基础组件
前端·ui·ai编程
摇滚侠30 分钟前
13 移动端 WEB 前端 WEB 开发 HTML5 + CSS3 + 移动 WEB
前端·css3·html5
就爱瞎逛42 分钟前
解决Ant Design Vue 日期选择器中文不生效
前端·javascript·vue.js
快递鸟社区42 分钟前
快递鸟海运查询接口全面解析:从入门到精通,助力跨境物流可视化
java·前端·人工智能