Как отслеживать ширину экрана?

Question

[Наталия]

Подскажите, как прописать инлайн условие в компоненте: если ширина экрана больше 700, то определять :item-size="46", если ширина менее 699, то :item-size="56"?

Answer 1

[0xD34F]

data: () => ({
  width: 0,
}),
computed: {
  itemSize() {
    return this.width > 700 ? 46 : 56;
  },
},
methods: {
  onResize() {
    this.width = window.innerWidth;
  },
},
created() {
  this.onResize();
  window.addEventListener('resize', this.onResize);
},
beforeDestroy() {
  window.removeEventListener('resize', this.onResize);
},

// или

data: () => ({
  itemSize: null,
}),
created() {
  const mql = window.matchMedia('(max-width: 700px)');
  const onChange = () => this.itemSize = mql.matches ? 56 : 46;
  onChange();
  mql.addEventListener('change', onChange);
  this.$on('hook:beforeDestroy', () => mql.removeEventListener('change', onChange));
},

:item-size="itemSize"

Comments

[Наталия]

благодарю!