如何在 vuetify 中启用“移动断点”状态？答案

【问题标题】：How can I get 'mobile-breakpoint' state enabled, in vuefity?如何在 vuetify 中启用“移动断点”状态？
【发布时间】：2021-05-28 05:37:03
【问题描述】：

我想通过mobile-breakpoint 状态控制<v-navigation-drawer>。启用时，使用drawer 否则使用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>

【问题讨论】：

我想你在找this.$vuetify.breakpoint.mobile
谢谢。现在我可以参考this.$vuetify.breakpoint.width :)

标签： vue.js vuetify.js

【解决方案1】：

如果该值将被硬编码并且不更改，我建议只使用计算来检查是否到达断点。

你可以使用：

this.$vuetify.breakpoint.name

查看是否已到达断点。

也许只是有一个断点变量，它的宽度是你想要打破它的。

查看文档： https://vuetifyjs.com/en/features/breakpoints/#breakpoint-service

【讨论】：