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;
        }
    },
相关推荐
rleS IONS1 天前
分布式WEB应用中会话管理的变迁之路
前端·分布式
就叫飞六吧1 天前
在线考试翻页抓取题目导出js
开发语言·前端·javascript
坚持就完事了1 天前
Linux的重定向符
运维·服务器·前端
爬虫练习生1 天前
极验4ast解混淆流程
javascript
踩着两条虫1 天前
AI + 低代码实战 | 一文吃透 API 管理、Swagger 导入与全局配置
前端·低代码·ai编程
AI自动化工坊1 天前
T3 Code:专为AI编程代理设计的Web IDE技术实践指南
前端·ide·人工智能·ai编程·t3
梦梦代码精1 天前
LikeShop 深度测评:开源电商的务实之选
java·前端·数据库·后端·云原生·小程序·php
Mr.E51 天前
odoo18 关闭搜索框点击自动弹出下拉框
开发语言·前端·javascript·odoo·owl·odoo18
鹏程十八少1 天前
4. 2026金三银四 Android OkHttp 面试核心 45 问:从源码到架构深度解析
android·前端·面试
invicinble1 天前
前端技术栈--webpack
前端·webpack·node.js