方法实现
在 src/utils 目录下创建一个新的文件 dom.js，添加以下内容：
/*** 获取元素距离页面顶部的距离* @param {HTMLElement} el - DOM元素* @returns {number} 距离页面顶部的像素值*/
export function getElementOffsetTop(el) {if (!el) return 0let offsetTop = 0let currentEl = el// 循环累加偏移量while (currentEl) {offsetTop += currentEl.offsetTopcurrentEl = currentEl.offsetParent}return offsetTop
}/*** 计算元素可用高度（从元素位置到页面底部的距离）* @param {HTMLElement} el - DOM元素* @param {number} [marginBottom=0] - 底部边距* @returns {number} 可用高度*/
export function getAvailableHeight(el, marginBottom = 0) {if (!el) return 0// 获取元素距离顶部距离const offsetTop = getElementOffsetTop(el)// 获取窗口高度const windowHeight = window.innerHeight || document.documentElement.clientHeight// 计算可用高度return windowHeight - offsetTop - marginBottom
}
使用方法
1. 在组件中引入方法
import { getElementOffsetTop, getAvailableHeight } from '@/utils/dom'
2.模板中写一个锚
<template><div ref="myElement" style="overflow: auto;"><!-- 内容区域 --></div>
</template>
3. 在js中使用
export default {methods: {calculateHeight() {// 获取DOM元素const el = this.$refs.myElement// 获取距离顶部距离const offsetTop = getElementOffsetTop(el)console.log('距离顶部距离:', offsetTop)// 获取可用高度（减去底部20px边距）const availableHeight = getAvailableHeight(el, 20)console.log('可用高度:', availableHeight)// 设置元素高度el.style.height = `${availableHeight}px`}},mounted() {this.calculateHeight()// 窗口大小改变时重新计算window.addEventListener('resize', this.calculateHeight)},beforeDestroy() {// 移除事件监听window.removeEventListener('resize', this.calculateHeight)}
}
注意事项
- 性能优化：getElementOffsetTop方法会触发回流(reflow)，频繁调用可能影响性能，建议在需要时调用（如窗口大小改变时）。
- 响应式处理：若依框架中，如果是在标签页或可折叠区域使用，需要注意在切换或展开时重新计算高度。
- 防抖处理：对于窗口resize事件，建议添加防抖函数：
import { debounce } from 'lodash'export default {methods: {calculateHeight: debounce(function() {// 计算逻辑}, 200)}
}
