Vue.js 改变开关 class 取决于视口尺寸

Question

I am displaying a sidebar which is open by default using the following:

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

Though, I want to have the opposite behaviour on mobile. Just not sure how to do this using 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

You can listen on window resize event then use matchMedia to compute the class.

<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'
    }
  }
...

Example

Answer 2

You need to detect screen size and mix that with your nav toggle button.

The variable that controls if the nav is visible should then be: isMobile? :showNav : showNav isMobile? :showNav : showNav . This way it will automatically close when in mobile and still will allow a button to open/close it.

In your mounted method you need to create an event listener for the screen resize:

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

Demo: https://codepen.io/adelriosantiago/pen/mdPbGQv?editors=1010