JavaScript 操作DOM元素及DOM元素相关属性

js 动态监听 dom 元素的高度变化.

相关文章

1. 参考文章 @ALISONLY
2. 参考文章 @盏茶作酒 kk

相关知识

1. window.onsize = function(){}
   缺点: 只能监听视口的变化不能监听 dom 元素的变化.
2. MutationObserver
   优点: MutationObserver 可以用来监听整个 DOM 中的变化。
3. ResizeObserver
   缺点： 兼容性不好。

<script>
export default {
    
    
  methods: {
    
    
    handleResize() {
    
    
      console.log("handle resize");
    }
  },
  mounted() {
    
    
    const dom = this.$refs.target.$el;   // 假设this.$refs.target返回是VueComponent对象
    this.observer = new ResizeObserver(this.handleResize);
    this.observer.observe(dom, {
    
     box: "border-box" });
  },
  beforeDestroy() {
    
    
    this.observer.disconnect();
  }
};
</script>

相关依赖

1. v-resize-observer
   文档地址 @文档
2. vue-resize