vue2 hooks useInnerHeight.vue 解决Table高度实时更新

背景

iview Table组件 有一个height的属性，为了实现浏览器改变，需要高度实时变化

useInnerHeight.vue

/src/hooks/useInnerHeight.vue

<template>
  <span style="display: hidden;"></span>
</template>

<script>
export default {
  components: {},
  props: {
    value: Number
  },
  data () {
    return {
      innerHeight: window.innerHeight,
    }
  },
  watch: {},
  computed: {
  },
  methods: {
    resizeHeight() {
      this.$emit('input', window.innerHeight)
    },
  },
  created () { },
  activated () { },
  mounted () { 
    window.addEventListener("resize", this.resizeHeight);
  },
  beforeDestroy () { 
    window.removeEventListener("resize", this.resizeHeight);
  }
}
</script>

<style lang="less" scoped>
</style>

app.vue

<template>
  <div id="app" style="width: 100%; height: 100%;">
    <useInnerHeight v-model="innerHeight"/>
  </div>
</template>

<script>
import useInnerHeight from '@/hooks/useInnerHeight'
export default {
  name: 'App',
  components: { useInnerHeight },
  data () {
    return {
      innerHeight: window.innerHeight,
    }
  },
  computed: {
  },
  created () {
    Vue.prototype.$app = this
  },
  methods: {
  },
  mounted () {
  },
  destroyed () {
  }
}
</script>
<style scoped lang="less">
</style>

业务页面.vue

<template>
   <div class="container-table mt10">
      <Table
        :height="tableHeight"
      >
    </Table>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data () {
    return {
    }
  },
  watch: {},
  computed: {
    tableHeight() {
      return this.$app.innerHeight - 180 - 40;
    },
  },
  methods: {
  },
  created () { },
  activated () { },
  mounted () {
   },
  beforeDestroy () { 
  }
}
</script>
<style lang="less" scoped>
</style>

使用的两种方法

1. 全局使用，上面的用法就是全局使用，因为很多页面都会用到实时的innerHeight,所以就挂到了全局
2. 局部使用，有的是业务代码，可以直接在业务页面使用。在页面创建一个变量，绑定到组件上。就不需要挂到全局使用了。