vue 实时获取元素高度

原创已于 2023-10-27 16:12:36 修改 · 607 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-08-18 16:32:18 首次发布

本文介绍了如何在Vue项目中安装并使用element-resize-detector库，通过`ref`和`onMounted`钩子实现对指定DOM元素的滚动高度监听，当元素大小变化时更新scrollHeight值。

1.安装element-resize-detector

npm install --save element-resize-detector

2.引入

<script>
    import { ref,onMounted,} from 'vue';
    import elementResizeDetector from "element-resize-detector";
    const scrollHeight = ref('100%')
     onMounted(() => {
          var erd = elementResizeDetector();
          erd.listenTo("监听的dom元素", (element) => {
            scrollHeight.value = element.offsetHeight-102
          })
    })
</script>