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;
        }
    },
相关推荐
兰亭古墨12 小时前
钉钉工作台自建组件定时器被禁?用 Swiper 模拟 setInterval 的优雅方案
前端·钉钉
夕除12 小时前
js-20
开发语言·javascript·windows
@––––––13 小时前
力扣hot100—系列8-回溯算法
javascript·算法·leetcode
phltxy13 小时前
Vue核心进阶:v-model深度解析+ref+nextTick实战
前端·javascript·vue.js
三小河13 小时前
React 样式——styled-components
前端·javascript·后端
Hi_MrXiao13 小时前
电脑上安装使用多个版本的谷歌浏览器
前端·chrome
广州华水科技13 小时前
单北斗GNSS变形监测一体机在大坝安全监测中的应用探索
前端
colicode13 小时前
C++语音验证码接口API示例代码详解:高性能C++语音校验接入Demo
前端·c++·前端框架·语音识别
We་ct13 小时前
LeetCode 92. 反转链表II :题解与思路解析
前端·算法·leetcode·链表·typescript
Wect13 小时前
LeetCode 92. 反转链表II :题解与思路解析
前端·算法·typescript