Vue. js изменить класс переключателя в зависимости от размера области просмотра

Question

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

<div class="content" :class="{'sidebar-close': !sidebarOpened}">

Хотя я хочу иметь противоположное поведение на мобильном устройстве. Просто не знаю, как это сделать с помощью Vue / Typescript.

<template>
 <div id="app">
<div v-if="getroute == false">
  <navbar />
</div>
<div class="content" :class="{'sidebar-close': !sidebarOpened}">
  <div class="main-container">
    <app-main />
  </div>
  <div class="menus" @click="toogleSidebar">
  </div>
  <div v-if="getroute">
    <div class="vsidebar">
      <sidebar />
    </div>
  </div>
  <div v-else>
    <div class="sidebar">
      <sidebar />
    </div>
  </div>
 </div>
<div v-if="getroute == false">
  <Footer/>
</div>

<script lang="ts">
import { Component, Vue, Provide } from 'vue-property-decorator'
import { AppMain, Navbar, Sidebar, Footer} from './components'
import { Getter, Action } from 'vuex-class';
import { IViewState } from '@/store/view';

@Component({
  name: 'Layout',
  components: {
    AppMain,
    Navbar,
    Sidebar,
    Footer,
  }
})

export default class extends Vue {
  private isActive: Boolean = false
  @Getter('viewStore/sidebarOpened') private sidebarOpened!: IViewState;
  @Action('viewStore/toogleSidebar') private toogleSidebar!: () => void;
  @Action('viewStore/setProductArticles') private setProductArticles!: () => void;
  @Action('viewStore/setProducts') private setProducts!: () => void;
  mounted() {
  }   
}    
</script>

Answer 1

Вы можете прослушивать событие window resize, а затем использовать matchMedia для вычисления класса.

<div :class='[sideBarClass]'>Sidebar</div>

...
  mounted() {
    this.handleResize()
    window.addEventListener('resize', this.handleResize)
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.sideBarClass = window.matchMedia('(max-width: 600px)').matches
      ? 'mobile-sidebar' : 'desktop-sidebar'
    }
  }
...

Пример

Answer 2

Вам нужно определить размер экрана и смешать его с кнопкой переключения навигации.

Переменная, которая контролирует, видна ли навигация, должна быть: isMobile ? !showNav : showNav. Таким образом, он будет автоматически закрываться на мобильном устройстве и по-прежнему позволит кнопке открывать / закрывать его.

В установленном методе вам необходимо создать прослушиватель событий для изменения размера экрана:

mounted () {
  this.onResize()
  window.addEventListener('resize', this.onResize, { passive: true })
},

Демо: https://codepen.io/adelriosantiago/pen/mdPbGQv?editors=1010