代码之家 › 专栏 › 技术社区 › Sebastien D

vuejs:根据窗口中的剩余空间自动调整div

vue-component vuejs2 vue.js

Sebastien D · 技术社区 · 6 年前

在vuejs(2.5.16)中,我试图设置div的style属性,以便根据窗口大小自动调整窗口的剩余空间:

我打算使用一个计算值,该值将为我提供正确的高度,并将其绑定到所需div的style属性中:

Vue.component('menus', {
    template: '<div id="menu-div">MY MENU</div>'
});

Vue.component('expandable', {
    template: '<div id="expandable-div" :style="{height:expandableHeight}">EXPANDABLE<div>{{expandableHeight}}</div></div>',
    computed: {
        expandableHeight() {

            return ($(window).height() - $("#expandable-div").position().top) + 'px'

        }
    }
});

var vm = new Vue({
    el: '#app'
});

fiddle

使用 $(window).height() 和 $("#expandable-div").position().top 从jquery中,我认为我可以实现一个结果,因为它在我的控制台中工作。

不幸的是,我有一个错误:

类型错误:无法读取未定义的属性“top”

1 回复 | 直到 6 年前

Vucko 6 年前

为什么不使用css flexbox 为了达到这个目的?

Vue.component('menus', {
  template: '<div id="menu-div">MY MENU</div>'
});

Vue.component('expandable', {
  template: '<div id="expandable-div">EXPANDABLE<div>foo</div></div>',
  computed: {}
});

var vm = new Vue({
  el: '#app'
});

body {
  margin: 0;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#menu-div {
  height: 50px;
  background: #768ffb;
  margin-bottom: 5px;
}

#expandable-div {
  background: #76fbc1;
  flex-grow: 1;
}

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <menus></menus>

  <expandable></expandable>
</div>

推荐文章

Goose · 如何更新Vue中的插槽。JS公司

6 年前

Scap · 访问其他组件中的vue组件数据时出现问题

6 年前

Andy · 从列表中删除vue组件始终删除列表中的最后一个元素

6 年前

Harshal Patil · 如何创建Vue。js插槽编程?

6 年前

kindisch · 无法解析动态导入的vue组件

6 年前

user1436631 · vueJS-当本地副本更新时,属性正在发生变化

6 年前

Willing Master · 如何配置选项以删除vue-tables-2中分页的第一个和最后一个按钮

6 年前

kshep92 · 将布尔属性传递给Vue组件的速记

6 年前

Bitwise · 将动态数据传递到路由器链路。

6 年前

user3699711 · 如何将数组中的元素添加到div元素中,其中id等于vue中的数组元素dealState号。js公司

6 年前