vue-insagent-pc/src/views/Letter/Appletter.vue

<template>
  <div>
    <div class="iframe-wrap">
      <iframe :src="this.global.h5BaseUrl" allowtransparency="true" frameborder="0"   scrolling="auto"  width="420" class="iframe" ref="homePage"></iframe>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      clientHeight: "",
    
    };
  },
  mounted() {
    // 获取浏览器可视区域高度
    this.clientHeight = `${document.documentElement.clientHeight}`; //document.body.clientWidth;
    //console.log(self.clientHeight);
    window.onresize = function temp() {
      this.clientHeight = `${document.documentElement.clientHeight}`;
    };
  },
  watch: {
    // 如果 `clientHeight` 发生改变，这个函数就会运行
    clientHeight: function () {
      this.changeFixed(this.clientHeight);
    },
  },
  created() { },
  methods: {
    changeFixed(clientHeight) {
      //动态修改样式
      this.$refs.homePage.style.height = clientHeight - 120 + "px";

    },
  },
};
</script>
<style scoped  lang="scss">
.iframe-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.demo-table-expand {
    font-size: 0;
    padding: 20px;
    box-sizing: border-box;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>