autoHeight.vue 高度自适应

Posted 2021-02-12 pengchenggang

autoHeight.vue 高度自适应

<!--
* @description 自适应高度
* @fileName autoHeight.vue
* @author 彭成刚
* @date 2019/03/11 09:45:38
* @version V1.0.0
<autoHeight v-model="s1Height"
                  :allHeight=‘0‘
                  :precent=‘20‘
                  :diffHeight=‘0‘>
  <table-s1 :height="s1Height"></table-s1>
</autoHeight>
!-->
<template>
  <div :style=‘styleHeight‘>
    <slot></slot>
  </div>
</template>

<script>
export default {
  data () {
    return {
      allHeightData: 0,
      styleHeight: ‘‘
    }
  },
  props: {
    value: {
      type: Number,
      default: 0
    },
    noStyle: {
      type: Boolean,
      default: false
    },
    allHeight: {
      type: Number,
      default: 0
    },
    precent: {
      type: Number,
      default: 100
    },
    diffHeight: {
      type: Number,
      default: 0
    }
  },

  components: {},

  computed: {},

  mounted () {
    this.calcHeight()
    window.addEventListener(‘resize‘, () => {
      this.calcHeight()
    })
    // window.innerHeight
  },
  watch: {
    ‘allHeight‘ (to, from) {
      this.calcHeight()
    },
    ‘$route‘ (to, from) {
      this.calcHeight()
    }
  },
  methods: {
    calcHeight () {
      let retHeight
      if (this.allHeight === 0) {
        this.allHeightData = window.innerHeight
      } else {
        this.allHeightData = this.allHeight
      }

      retHeight = (this.allHeightData * this.precent / 100) - this.diffHeight
      this.$emit(‘input‘, retHeight)

      if (!this.noStyle) {
        this.styleHeight = ‘height: ‘ + retHeight + ‘px; overflow-y:auto;‘
      }
    }

  }
}

</script>
<style lang=‘less‘ scoped>
</style>