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;
        }
    },
相关推荐
成为大佬先秃头几秒前
渐进式JavaScript框架:Vue — API
开发语言·javascript·vue.js
先做个垃圾出来………11 分钟前
搜索树完整
开发语言·javascript·ecmascript
ResponseState20020 分钟前
安卓原生写uniapp插件手把手教学调试、打包、发布。
前端·uni-app
阿赵3D23 分钟前
JavaScript学习笔记——11、正则表达式
javascript·笔记·学习·正则表达式
颜酱28 分钟前
SourceMap 深度解析:从映射原理到线上监控落地
前端·javascript
LYOBOYI12335 分钟前
qt的事件传播机制
java·前端·qt
IT_陈寒37 分钟前
Python 3.12 性能优化:5 个鲜为人知但提升显著的技巧让你的代码快如闪电
前端·人工智能·后端
军军君0140 分钟前
Three.js基础功能学习二:场景图与材质
前端·javascript·学习·3d·材质·three·三维
Komorebi゛1 小时前
【Vue3 + Element Plus】Form表单按下Enter键导致页面刷新问题
前端·javascript·vue.js
踢球的打工仔1 小时前
typescript-基本类型
前端·javascript·typescript