javascript - Vue.js 根据视口(viewport)大小更改开关类

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

您可以监听窗口 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'
    }
  }
...

Example