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

你可能感兴趣的:(javascript,开发语言,ecmascript)