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;
        }
    },
相关推荐
冴羽yayujs10 小时前
JavaScript 9 个先有库再有 API 的故事
开发语言·javascript·ecmascript
m0_7510186610 小时前
docker 安装 nginx
vue.js·nginx·docker
油丶酸萝卜别吃11 小时前
JavaScript 深度合并函数 deepMerge 实现指南(附完整测试用例)
开发语言·javascript·测试用例
问心无愧051311 小时前
ctf show web 入门152
前端·笔记
kyriewen11 小时前
Copilot下个月按Token收钱,我算了一笔账:重度用户一年要多花3000块
前端·javascript·openai
zyl8372111 小时前
3Dmol.js + Vue3快速上手
vue.js
镜宇秋霖丶11 小时前
2026.5.18@霖宇博客制作中遇见的问题
vue.js
还有多久拿退休金11 小时前
dnd-kit 碰撞检测算法:你的订单为什么自己"跑"到了 1 号?
前端
qq_3168377511 小时前
npm run tauri build Downloading下载超时
前端·npm·node.js
w_t_y_y11 小时前
VUE3(二)VUE2和VUE3区别
前端·javascript·vue.js