microvideo-component/lib/chart/resize.js

microvideo components

import { debounce } from "../../utils";

export default {
  data() {
    return {
      resizeHandler: false,
      resizeObserver: null
    };
  },
  props: {
    // 要监听的元素选择器，可以是类名或ID
    targetSelectors: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    this.initListener();
    this.initResizeObserver();
  },
  activated() {
    if (!this.resizeHandler) {
      // avoid duplication init
      this.initListener();
      this.initResizeObserver();
    }

    // when keep-alive chart activated, auto resize
    this.resizeChart();
  },
  beforeDestroy() {
    this.destroyListener();
    this.destroyResizeObserver();
  },
  deactivated() {
    this.destroyListener();
    this.destroyResizeObserver();
  },
  beforeUnmount() {
    this.destroyListener();
    this.destroyResizeObserver();
  },
  methods: {
    /**
     * 初始化窗口resize监听
     */
    initListener() {
      this.resizeHandler = debounce(() => {
        setTimeout(() => this.resizeChart());
      }, 100);
      window.addEventListener("resize", this.resizeHandler);
    },

    /**
     * 销毁窗口resize监听
     */
    destroyListener() {
      window.removeEventListener("resize", this.resizeHandler);
      this.resizeHandler = false;
    },

    /**
     * 监听自身元素resize
     */
    initResizeObserver() {
      if (!this.resize) return;

      this.resizeObserver = new ResizeObserver(() => {
        this.resizeHandler && this.resizeHandler();
      });

      this.resizeObserver.observe(this.$el);
    },

    /**
     * 销毁ResizeObserver监听
     */
    destroyResizeObserver() {
      if (this.resizeObserver) {
        this.resizeObserver.disconnect();
        this.resizeObserver = null;
      }
    },

    /**
     * 执行图表resize
     */
    resizeChart() {
      const { chart } = this;
      chart && chart.resize();
    }
  }
};