vue3监听dom元素变化

最新推荐文章于 2024-12-10 16:06:33 发布

原创最新推荐文章于 2024-12-10 16:06:33 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

该文章介绍了如何通过安装resize-observer-polyfill库，然后在Vue组件中引入并创建ResizeObserver实例来监听DOM元素的变化。当元素尺寸改变时，触发回调函数，进而调用echarts的resize方法更新图表大小。

1：安装ResizeObserver

npm install resize-observer-polyfill --save-dev

2:引入插件，获取dom元素传入

<template>
  <div class="userPortrait" id="myElement">
  </div>
</template>



<script lang="ts" setup>
import ResizeObserver from "resize-observer-polyfill";


let resizeObserver;


onMounted(() => {
  let myElement = document.getElementById("myElement");
  resizeObserver = new ResizeObserver((entries, observer) => {
    console.log("DOM元素变化了")
    echarts.init(document.getElementById("lineChart_content")).resize();
  });
  resizeObserver.observe(myElement);
});

</script>