Делая так, вы используете только CSS для стилизации всего. Это необходимо для фронт-энда, учитывая производительность. Я думаю, что прошло много времени с тех пор, как мы прекратили добавлять EventListeners в Javascript, связанные со стилем или обработкой макета.

carousel-3d(:display="3", :width="150", :height="150")

у установить привязки атрибутов на основе медиа-запроса

например

дисплей должен стать 5, когда ширина экрана> 960px

 Brad09 окт. 2018 г., 10:19

Ответы на вопрос(2)

Решение Вопроса

Вы можете попробовать связатьдисплей значение свойства компонента:

<carousel-3d :display="display">

... а затем обновите это свойство при изменении размера окна:

...

data() {
  return {
    display: 3
  }
},

methods: {
  onResize() {
    if (window.innerWidth > 960) {
      this.display = 5
    } else {
      this.display = 3
    }
  }
},

created() {
  window.addEventListener('resize', this.onResize)
},

beforeDestroy() {
  window.removeEventListener('resize', this.onResize)
},

...
 kushalvm04 окт. 2018 г., 03:50
Конечно. Это способ. Но использование javascript для того, что должно быть сделано с CSS, не плохо ли это для производительности? Вы случайно не сталкивались с чем-то, работающим с Vuejs, поскольку у меня был тот же вопрос.
 kushalvm04 окт. 2018 г., 06:57
Кроме того, вы добавляете событие на DOM напрямую. Vue или React работает над концепцией Virtual DOM.

или, если они вообще есть, уже слишком сложны. Включает много ненужной работы, где все можно сделать аккуратно и в CSS.

Это решениеstyled components или на самом деле любойCSS in JS решения, чтобы справиться с такими вещами с легкостью.

Например, в стилизованных компонентах ваши стили написаны внутри литерала шаблона ES6.

import styled from 'styled-components';
import breakpoint from '../utils/breakpoint.js';

const YourStyledComponent = styled.div`
    width: calc(100% - 30px);
    @media (min-width: ${breakpoint.SM}px) {
        // Your media styles
    }
`;

Затем внутри вашего компонента Vue используйте его как обычный компонент. Вы также можете передать это реквизит. Читайте больше об этом -Вью-стиль-компоненты.

Делая так, вы используете только CSS для стилизации всего. Это необходимо для фронт-энда, учитывая производительность. Я думаю, что прошло много времени с тех пор, как мы прекратили добавлять EventListeners в Javascript, связанные со стилем или обработкой макета.

Ваш ответ на вопрос