vue 两种计算高度

最新推荐文章于 2025-11-17 20:00:00 发布

原创最新推荐文章于 2025-11-17 20:00:00 发布 · 3.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文探讨了Vue.js中实现响应式布局的方法，特别是在iframe图片适配及组件高度自适应方面的实践。通过计算属性动态调整滚动区高度，确保了在不同屏幕尺寸下页面元素的一致性和用户体验。

computed: {
// (滚动区高度：iframe图片响应式适配)
scrollerHeight: function() {
return (window.innerHeight - 80) + ‘px’;
}
},

mounted() {
    this.$nextTick(() => {
        let h = this.$refs.main.offsetHeight;
        let h_btngroup = this.$refs.btngroup.offsetHeight;
        let h_main = h - 40 - h_btngroup;
        this.style_form =
            "height:" + h_main + "px;overflow-y:auto;overflow-x:hidden;";
    });
},