TopBottomLayout.vue 2.15 KB
<template>
  <div ref="topBottomLayoutCom" class="up-down-layout-com">
    <!-- <dee-fold-pane
      :min-percent="minPercent"
      :default-percent="defaultPercent"
      split="horizontal"
    > -->
    <div ref="topBox" slot="paneL" class="border-box-style border-box-left">
      <slot name="top" />
    </div>
    <div ref="bottomBox" slot="paneR" class="border-box-style border-box-right">
      <slot name="bottom" />
    </div>
    <!-- </dee-fold-pane> -->
  </div>
</template>

<script>
import elementResizeDetectorMaker from 'element-resize-detector'
export default {
  name: 'TopBottomLayout',
  slots: ['top', 'bottom'],
  description: '上下结构',
  data() {
    return {
      minPercent: 10,
      defaultPercent: 15
    }
  },
  mounted() {
    this.$refs.topBox && this.onResize()
  },
  methods: {
    onResize() {
      const that = this
      const erd = elementResizeDetectorMaker()
      const containerHeight = this.$refs.topBottomLayoutCom.offsetHeight - 8
      erd.listenTo(this.$refs.topBox, (ele) => {
        that.$nextTick(() => {
          that.defaultPercent = Math.ceil(ele.offsetHeight / containerHeight * 100)
        })
      })
    }
  }
}
</script>

<style lang='scss'>
.up-down-layout-com {
  height: 100%;
  display: flex;
  flex-direction: column;
  .border-box-style {
    padding: 0;
    height: auto;
    .slot-item-content{
      height: calc(100% - 2px);
    }
  }
  .border-box-left {
    height: auto;
    // min-height: 100%;
    margin-bottom: 8px;
  }
  .border-box-left,
  .border-box-right {
    padding: 8px;
    box-sizing: border-box;
  }
  .border-box-right {
    z-index: 10;
    position: relative;
    flex: 1;
  }
  .panel-wrap {
    padding: 8px;
    height: 100%;
    overflow-y: hidden;
    box-sizing: border-box;
  }
  .splitter-pane-resizer.horizontal {
    opacity: 1;
    background-color: #F1F4F5;
    height: 8px;
    border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
  }
  /* 处理插入的 object 标签占据顶部的高度导致上部逐渐增加进而循环触发 element-resize-detector 的监听事件,导出下面表格逐渐塌落的bug */
  object {
    display: none !important;
  }
}
</style>