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

时间:2019-06-11 14:22:02

标签: javascript vue.js dom vuejs2 html-framework-7

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

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。

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

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

要获取组件的高度,@ 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'
          }
      }
  },