Как динамически установить ширину div в соответствии с размером экрана? - PullRequest
Новая
       71

Как динамически установить ширину div в соответствии с размером экрана?

0 голосов
/ 13 июля 2020

У меня есть веб-приложение, в котором я хотел бы динамически изменять ширину div в соответствии с размером экрана, как это делает это приложение: https://gyazo.com/ce99185a58e5c7d8cef9f8375952db8c

В идеале я бы люблю знать, как я могу добиться этого самостоятельно. Любая информация будет глубоко цениться. Вот как я пытался это сделать, но это не работает:

Приложение разделено на два равных сегмента, левый и правый.

Я использую vue-styled-components для установки css свойства с javascript. 

import styled from "vue-styled-components";

let widthProps = { dynamicWidth: String }

const RightContent = styled('div', widthProps)`
    display: block;
    height: 100vh;
    width: ${props => props.dynamicWidth};
    max-height: 100vh;
    padding-top: 32px;
    padding-right: 48px;
    padding-bottom: 16px;
    padding-left: 48px;
`;

export default RightContent;

Я думал, что могу динамически установить div width примерно так: 

<RightContent id="rightContent" :dynamicWidth="dynamicWidth">

onResize() {
  window.addEventListener("resize", () => {
    let rightcontent = window.document.getElementById("rightContent");
    if (rightcontent) {
      //the 96 is padding left and padding right
      let width = rightcontent.offsetWidth - 96;
      console.log(width);
      this.valueIWantToSetTheWidthOfTheDivTo = width;
      // this.dynamicWidth = `${width}px`;
    }
  });
}

Я бы назвал эту функцию в крючок created().

Однако, как только я раскомментирую эту строку: // this.dynamicWidth = `${width}px`;, ширина будет установлена ​​и станет stati c, поэтому всегда будет то значение, которое было при изменении размера экрана в первый раз.

Я создал codeandbox с моей проблемой.

...