Question

我想使用以下代码获取我的应用程序的客户端高度：

mounted() {
    document.onreadystatechange = () => {
      if (document.readyState == "complete") {
        console.log("Page completed with image and files!");
        console.log(this);
        console.log(this.$el.clientHeight);
      }
    };
}

在console.log(this)中，我可以看到我的主要元素，其中的clientHeight是 702 ，但是console.log(this.$el.clientHeight)的结果是 0 。

我也正在使用Framework7创建我的应用程序UI。

该问题该怎么办？任何帮助将不胜感激。

Answer 1

在组件模板上设置ref="potato"（如果这对您来说是一个有效的选项），然后console.log(this.$refs.potato.clientHeight);将为您提供组件高度。

Answer 2

要获取组件的高度，@ Victor Popescu的回答是好的。

但是，如果需要客户端高度大小，我认为这种方法更好。

new Vue({
el: '#app',
data: {
    clientHeight: 0
},
created() {
    window.addEventListener('resize', this.handleResize);
    this.handleResize();
},
destroyed() {
    window.removeEventListener('resize', this.handleResize);
},
methods: {
    handleResize() {
        this.clientHeight = window.innerHeight;
    }
}
});

html, body, #app, section {
  height: 100%;
}

h2 {
padding: 2rem 0;
text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <section>
<h2 class="title is-2">
  Height: {{ clientHeight }}
</h2>
  </section>
</div>

您还可以观看clientHeight来设置任何其他组件的高度。

watch: {
      clientHeight: function(val) {
          if (document.getElementById("elementId")) {
            document.getElementById("elementId").style.height = val + 'px'
          }
      }
  },

无法使用$ el在Vue js中获得clientHeight

2 个答案: