如何在vuefity中启用“移动断点”状态？

Question

我想通过mobile-breakpoint状态来控制<v-navigation-drawer>。启用时，使用to drawer else to mini。如何引用mobile-breakpoint状态？

<template>
  <v-app>
    
    <v-navigation-drawer
        v-model="drawer"
        :mini-variant.sync="mini"
        mobile-breakpoint="960"
        app>
      <h1>v-navigation-drawer</h1>
    </v-navigation-drawer>

    <v-btn @click="click"> Button </v-btn>
    
  </v-app>
</template>

<script>
export default {
  name: "foo",
  data: () => ({
    drawer: true,
    mini: true
  }),
  methods: {
    click() {
      // How to refer 'mobile-breakpoint' status??
      if (mobileBreakpointEnabled) {
        this.drawer = !this.drawer
      } else {
        this.mini = !this.mini
      }
    }
  }
}
</script>

Answer 1

如果这个值是硬编码的，并且不会改变，我建议只使用一个计算器来检查是否到达了断点。

您可以使用：

this.$vuetify.breakpoint.name

查看是否已到达断点。

也许只需要有一个断点变量，其中包含您想要中断的宽度，这样做会很有帮助。

请参阅文档：https://vuetifyjs.com/en/features/breakpoints/#breakpoint-service