2020-04-22 vue 动态获取浏览器高度来对页面与tab栏进行布局

  data() {
    return {
      // 获取高度
      fullHeight: window.innerHeight + 'px',
      // 卡片样式
      cardBodyStyle: {},
      // 表格高度
      tableHeight: null,
      // 弹出框表格样式
      userTableHeight: null,
    }
  },
  computed: {
    // 计算选项卡高度
    tagsView: {
      get() {
        return this.$store.state.settings.tagsView
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)
    },
    fullHeight(val) {
      if (!this.timer) {
        this.fullHeight = val
        this.timer = true
        this.initPage()
        const that = this
        setTimeout(function() {
          that.timer = false
        }, 400)
      }
    },
    tagsView(val) {
      this.initPage()
    }
  },
  mounted() {
    this.getBodyHeight()
    this.initPage()
  },
  beforeMount() {
    // 监听表格高度
    window.addEventListener('resize', this.tableHeight)
  },
  methods: {
    // 动态获取浏览器高度
    getBodyHeight() {
      const that = this
      window.onresize = () => {
        return (() => {
          // window.fullHeight = document.documentElement.clientHeight
          that.fullHeight = window.innerHeight
        })()
      }
    },
    // 初始化页面的高度
    initPage() {
      if (this.tagsView) {
        this.cardBodyStyle = {
          padding: '20px',
          // height: window.innerHeight - 140 + 'px',
          overflow: 'auto'
        }
        this.tableHeight = window.innerHeight - 325 + 'px'
      } else {
        this.cardBodyStyle = {
          padding: '20px',
          // height: window.innerHeight - 100 + 'px',
          overflow: 'auto'
        }
        this.tableHeight = window.innerHeight - 285 + 'px'
      }
      // 已选用户表格高度
      this.userTableHeight = window.innerHeight * 0.34 + 'px'
    }
}