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

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

例子

Answer 2

您需要检测屏幕尺寸并将其与导航切换按钮混合使用。

控制导航是否可见的变量应该是： isMobile? :showNav : showNav isMobile? :showNav : showNav 。 这样，它会在移动设备中自动关闭，并且仍然允许按钮打开/关闭它。

在您的挂载方法中，您需要为屏幕调整大小创建一个事件侦听器：

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

演示： https://codepen.io/adelriosantiago/pen/mdPbGQv?editors=1010