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;
        }
    },
相关推荐
Alice-YUE4 分钟前
深入解析 JS 事件循环:浏览器与 Node.js 的差异全解析
前端·javascript·笔记·学习
HYCS6 分钟前
用pixijs实现fabricjs(二):对象的基础位置信息
前端·javascript·canvas
Alice-YUE7 分钟前
【无标题】
开发语言·javascript·ecmascript
淸湫10 分钟前
项目中使用了全局权限管理,请详细描述如何通过Vue Router的路由守卫来实现全局权限控制?
前端·vue.js
Twsit丶12 分钟前
ECMAScript 常用特性整理(ES6 — ES13)
javascript
雪铃儿13 分钟前
Shorebird 之外,Flutter Android 热更新还有什么选择
android·前端
李剑一18 分钟前
前端必看 | Vue 刷新页面,生命周期钩子直接 "罢工",原来问题在这?90% 开发者都栽过!
前端·vue.js
閞杺哋笨小孩26 分钟前
域名驱动多租户入驻:后台配置 + 前端解析
前端·vue.js
TeamDev27 分钟前
在 Excel 加载项中嵌入 Web 视图
前端·后端·.net
悠哉摸鱼大王28 分钟前
cesium学习(一)-基本概念
前端·cesium