Vuejs: autofit div в соответствии с оставшимся пространством в окне - PullRequest
Новая
       9

Vuejs: autofit div в соответствии с оставшимся пространством в окне

0 голосов
/ 04 июня 2018

В vueJs (2.5.16) я пытаюсь установить свойство стиля для div, чтобы оно автоматически помещалось в оставшееся пространство окна в зависимости от его размера:

enter image description here

Я намеревался использовать вычисленное значение, которое дало бы мне правильную высоту и привязало бы его к свойству стиля требуемого div: 

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 Я думал, что смогу добиться результата, поскольку он работает в моей консоли.

К сожалению, у меня ошибка:

TypeError: Невозможно прочитать свойство 'top' из неопределенного

1 Ответ

0 голосов
/ 04 июня 2018

Почему бы не использовать 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>
...