vue2 hooks useInnerHeight.vue 解决Table高度实时更新-CFANZ编程社区

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>

使用的两种方法

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

---------------------------------------------
生活的意义就是你自己知道你要做什么，明确目标。没有目标，后面都是瞎扯！

https://pengchenggang.gitee.io/navigator/

SMART原则:

目标必须是具体的（Specific）
目标必须是可以衡量的（Measurable）
目标必须是可以达到的（Attainable）
目标必须和其他目标具有相关性（Relevant）
目标必须具有明确的截止期限（Time-based）