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;
        }
    },
相关推荐
肖。35487870942 分钟前
html中onclick误区,后续变量会更改怎么办?
android·java·javascript·css·html
暴力袋鼠哥5 分钟前
SpringBoot+Vue实战:多模态疾病初筛与护理建议系统(含泳道图+时序图+完整后端代码)
vue.js·spring boot·后端
Lee川8 分钟前
从字符串操作到数组映射:一次JavaScript数据处理的深度探索
javascript
随逸17719 分钟前
《React 性能优化:useMemo 与 useCallback 实战》
javascript·react.js
J2虾虾22 分钟前
Vite前端项目构建
前端
HelloReader23 分钟前
Tauri 用“系统 WebView + 原生能力”构建更小更快的跨平台应用
前端·javascript·后端
Wect26 分钟前
LeetCode 106. 从中序与后序遍历序列构造二叉树:题解+思路拆解
前端·算法·typescript
yuki_uix26 分钟前
当系统"没了头"(headless),AI 反而更好接手了?
前端
滕青山26 分钟前
JSON转TypeScript接口核心JS实现
前端·javascript·vue.js
专注VB编程开发20年30 分钟前
C#,VB.NET多台电脑读取REDIS服务器,如何保证数据不会冲突
前端·redis·bootstrap·html