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;
        }
    },
相关推荐
Mr.Jessy几秒前
Web APIs 学习第四天:DOM事件进阶
开发语言·前端·javascript·学习·ecmascript
云枫晖3 分钟前
前端工程化实战:手把手教你构建项目脚手架
前端·前端工程化
醉方休5 分钟前
开发一个完整的Electron应用程序
前端·javascript·electron
故作春风11 分钟前
手把手实现一个前端 AI 编程助手:从 MCP 思想到 VS Code 插件实战
前端·人工智能
不会算法的小灰18 分钟前
Vue.js 基础教程:从入门到实践
前端·javascript·vue.js
掘金一周22 分钟前
没开玩笑,全框架支持的 dialog 组件,支持响应式| 掘金一周 11.6
前端·人工智能
拉不动的猪35 分钟前
浏览器&Websocket&热更新
前端·javascript·vue.js
那些免费的砖1 小时前
Reka UI - 一款免费开源的 Vue 无头 UI 组件库,样式定制开发项目的绝佳选择
vue.js·ui·开源
Never_Satisfied1 小时前
在JavaScript中,将包含HTML实体字符的字符串转换为普通字符
开发语言·javascript·html
im_AMBER1 小时前
React 12
前端·javascript·笔记·学习·react.js·前端框架