Vue element-resize-detector 监听元素大小以自适应高度 外层div自适应高度里层div

element-resize-detector

针对元素的优化的跨浏览器调整大小侦听器

安装

npm install element-resize-detector

引入

var elementResizeDetectorMaker = require("element-resize-detector");

创建实例

// 使用默认的基于对象的方法
var erd = elementResizeDetectorMaker();

// 使用超快的基于滚动的方法
// 推荐
var erdUltraFast = elementResizeDetectorMaker({
  strategy: "scroll" //<- For ultra performance.
});

API

• listenTo(element, listener) or listenTo(options, element, listener)
  • 使用指定监听器监听指定元素
• removeListener(element, listener)
  • 移除指定元素的指定监听器
• removeAllListeners（element）
  • 移除指定元素所有监听器
• uninstall(element)
  • 卸载指定元素的监听器和检测器

Vue element-resize-detector 监听元素大小以自适应高度 外层div自适应高度里层div

Html：

<div class="layout-main-container" :style="layoutMainStyle">
	// ...
	<div class="layout-main" :ref="layoutMainRef">
      <transition name="fade-transform" mode="out-in">
        <keep-alive :max="10">
          <router-view />
        </keep-alive>
      </transition>
    </div>
	// ...
</div>

JavaScript：

export default {
  name: "LayoutMain",
  data() {
    return {
      layoutMainRef:
        "layoutMain-" +
        Math.random()
          .toString()
          .substr(2),
      layoutMainStyle: {},
    };
  },
  methods: {
    // LayoutMain自适应高度：使用 element-resize-detector 监听dom元素的高度
    resizeLayoutMainHeight(element) {
      var height = element.offsetHeight;
	  // 830 为 屏幕最大高度
      let isNotNone = height <= 830;
	  // isNotNone 为 true 则 layoutMainRef 的高度小于屏幕最大高度，需要外层div【layout-main-container】设置高度
	  // 为 false 则外层div【layout-main-container】自适应高度
      let minHeight = isNotNone ? "80%" : "";
	  // 需要判断现在的是否与监听后的高度一致，一致则返回，不一致则设置高度
	  // 【判断原因：设置高度后会引起监听事件发生】
      if (
        this.layoutMainStyle.minHeight &&
        this.layoutMainStyle.minHeight == minHeight
      ) {
        return;
      }
      this.layoutMainStyle = {
        minHeight
      };
    }
  },
  mounted() {
	// 使用 refs 获取指定元素
    let layoutMainEle = this.$refs[this.layoutMainRef];
    if (layoutMainEle) {
	  // 创建实例 使用超快的基于滚动的方法
      this.erd = elementResizeDetectorMaker({
        strategy: "scroll",
        callOnAdd: true
      });
	  // 使用指定监听器监听指定元素
      this.erd.listenTo(layoutMainEle, this.resizeLayoutMainHeight);
    }
  },
  destroyed() {
    let layoutMainEle = this.$refs[this.layoutMainRef];
    if (layoutMainEle) {
	  // 卸载指定元素的监听器和检测器
      this.erd.uninstall(layoutMainEle);
    }
  }
};