我想使用以下代码获取我的应用程序的客户端高度:
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。
该问题该怎么办? 任何帮助将不胜感激。
答案 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'
}
}
},