vue监听页面元素宽度和高度变化

最新推荐文章于 2024-07-24 03:12:57 发布

原创最新推荐文章于 2024-07-24 03:12:57 发布 · 920 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #java #node.js

本文介绍了如何在Vue项目中利用element-resize-detector库监听DOM元素的宽度和高度变化。首先，通过npm安装element-resize-detector，然后在Vue组件中导入并使用该库。在mounted生命周期钩子中设置监听器，当元素尺寸改变时，获取新的宽高并在$nextTick中执行相应操作。

vue监听页面元素宽度和高度变化

我们通过借助element-resize-detector来实现

1、安装 element-resize-detector

npm install element-resize-detector

2、引入element-resize-detector

<script>
import elementResizeDetector from "element-resize-detector";
</script>

3、监听

mounted() {
  const _this = this;
      var erd = elementResizeDetector();
      erd.listenTo('监听的dom', (element) => {
        var width = element.offsetWidth;
        var height = element.offsetHeight;
        _this.$nextTick(() => { // 这里填写监听改变后的操作
        });
      });
},