dy-admin-manager/src/components/auto-height/index.vue

<template>
  <div ref="box" class="auto-height" :style="{height: height}">
    <slot/>
  </div>
</template>
<script>
export default {
  name: 'auto-height',
  props: {
    pre: {
      type: Number,
      default: .6
    },
    max: {
      type: Number,
      default: 400,
    },
    min: {
      type: Number,
      default: 200
    }
  },
  methods: {
   setSize() {
      const width = this.$refs.box.offsetWidth
      return Math.max(this.min, Math.min(Math.floor(width * this.pre), this.max)) + 'px'
    },
    resize() {
      window.requestAnimationFrame(() => {
        this.height = this.setSize()
      })
    },
  },
  mounted () {
    window.addEventListener('resize', this.resize, false)
    const event = new Event('resize')
    window.dispatchEvent(event)
  },
  destroyed() {
    window.removeEventListener('resize', this.resize, false)
  },
  data() {
    return {
      height: '400px',
    }
  }
}
</script>