vueダイナミック取得画面高さ

大体の考え方は、スクリーンの高さの変化を傍受し、スクリーンの高さが変化するたびに、スクリーンの高さを再取得し、heightを再設定することである.

template

js

data () {
    return {
      // screenWidth: document.documentElement.clientWidth, //     
      screenHeight: document.documentElement.clientHeight //     
    }
  },
  watch: {
    // 'screenWidth': function (val) { //         
    //   var oIframe = document.getElementById('maindiv')
    //   oIframe.style.width = (Number(val)) + 'px' // '120'       ，   
    // },
    'screenHeight': function (val) { //         
      var oIframe = document.getElementById('maindiv')
      // alert(this.$store.getters.screenHeight)
      oIframe.style.height = (Number(val) - 40) + 'px'
    }
  },
  mounted () {
    var _this = this
    window.onresize = function () { //             
      // _this.screenWidth = document.documentElement.clientWidth //     
      _this.screenHeight = document.documentElement.clientHeight //     
    }
  },