vue2 移动端获取高度

### 实现 Vue2 移动端项目中获取 DOM 元素高度

为了在 Vue2 的移动端项目里正确获取 DOM 元素的高度，可以利用 `mounted` 生命周期钩子函数配合 JavaScript 原生方法来操作 DOM。下面是一个具体的例子：

#### 使用 mounted 钩子和原生 JS 获取元素高度

当组件挂载完成后，可以通过 `this.$refs` 来访问模板内的 HTML 元素，并调用其 `offsetHeight` 属性获得该元素的实际渲染后的高度。

<template>
<div ref="myElement" class="article-container">
    文章详情
</div>
</template>

<script>
export default {
name: 'ArticleIndex',
components: {},
props: {
    articleId: {
        type: [Number, String],
        required: true
    }
},
data() {
    return {};
},
computed: {},
watch: {},
created() {},
mounted() {
    const elementHeight = this.$refs.myElement.offsetHeight;
    console.log('The height of the div is:', elementHeight);
},
methods: {}
}
</script>

<style scoped lang="less"></style>

上述代码展示了如何定义一个名为 `ArticleIndex` 的组件并尝试在其被挂载之后打印出 `.article-container` 这个容器的高度[^1]。

如果希望更灵活地处理不同情况下的尺寸变化（比如窗口大小改变），还可以监听 window 对象上的 resize 事件，在回调函数内部重新计算目标元素的高度。

另外需要注意的是，在某些场景下可能需要等待图片加载完成才能得到准确的高度值。此时可以在图片标签上绑定 load 事件处理器来进行相应的逻辑控制。