Quasar：抽屉自动变为迷你模式

如何解决Quasar：抽屉自动变为迷你模式

我正在使用 Quasar，当用户浏览器变小时，我希望 drawer 自动更改为 mini 模式。目前，即使我缩小浏览器，它也总是打开。

这是我在下面尝试的：

    <q-drawer
      v-model="drawer"
      show-if-above
      :mini="!drawer || miniState"
      @click.capture="drawerClick"
      :width="220"
      :breakpoint="500"
      bordered
      :content-style="{ backgroundColor: '#f5f7f9' }"
    >
      <q-scroll-area class="fit">
        <q-list padding>
          <q-btn
            v-if="!miniState"
            flat
            left
            @click="miniState = !miniState"
            class="logo-btn"
          >
            <img
              src="~assets/os_logo.png"
              width="144px"
              height="24px"
              contain
            />
          </q-btn>
          <q-btn v-else flat left @click="miniState = !miniState">
            <img src="~assets/os_logo_no_text.png" width="24px" contain />
          </q-btn>

          <!-- MENU -->
          <q-expansion-item
            default-opened
            v-for="(menu,index) in menus"
            :style="index === 0 && 'margin-top: 27px'"
            :icon="menu.icon"
            :label="menu.title"
            :key="menu.id"
            :expand-icon="menu.subMenus.length === 0 ? 'none' : ''"
            header-class="header-bg text-black"
            expand-icon-class="text-gray"
          >
            <q-expansion-item
              v-for="(sub,index) in menu.subMenus"
              :key="index"
              :label="sub.title"
              expand-icon="none"
              class="sub-content"
              :to="{ name: sub.link }"
            />
          </q-expansion-item>
        </q-list>
      </q-scroll-area>
    </q-drawer>

以及下面的脚本代码：

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  // name: 'ComponentName'
  data() {
    return {
      drawer: false,miniState: false,},computed: { // <-- I tried this one..
    miniState() {
      if (window.innerWidth < 600) {
        return (this.miniState = true);
      }
    }
  },});
</script>

我也在这里检查了这个答案：How to default navigation drawer to closed on mobile and open on desktop?

但这并不是我真正的目标，因为 drawer 的模式被卡住了并且没有响应变化。有什么建议吗？

解决方法

在你的代码中你犯了几个错误；

您将数据属性 30'000'000'000 作为计算属性重复。数据函数内的 miniState 属性将覆盖计算属性；因此它总是miniState
你没有从你的计算属性返回一个值；相反，您只是在分配。
仍然；诸如 false 之类的窗口属性在 Vue 中不是响应式和可观察的。如果我错了，请纠正我。因此，每次调整窗口大小时都不会触发监视 innerWidth。

由于您使用的是 Quasar，因此您可以使用 Quasar 附带的 window.innerWidth 插件。您无需安装任何东西，默认安装了 screen 插件。 Here is the link to the docs.

我在下面放了一个非常简单的代码示例，其中包含您所需的功能。这不是您在上面的帖子中放置的代码。我从 Quasar 文档中提取了抽屉和内容 here

现在当屏幕尺寸低于screen时，抽屉会自动进入mini模式；这当然是可配置的。

还有;附带说明一下，如果您只开始使用 Vue 和 Quasar，那么 Vue 现在已升级到 composition api 附带的 500 px。 Quasar 也是 upgraded to version 2，它支持 Vue3。

按照下面的评论，你就会明白代码！

Vue3

new Vue({
  el: '#q-app',data: function() {
    return {
      drawer: true,// using a property to track when to show the mini drawer: this way is easy to maintain.
      switchToMini: 500
    }
  },computed: {
    // use ministate as a computed property
    miniState: function() {
      // use the screen plugin of Quasar -> this is very handy
      return this.$q.screen.width < this.switchToMini
      // you can do better and compare agains Quasars default breakpoints; following code checks whether the current screen size is 'sm'. You can comapare against 'xs','sm','md','lg' and 'xl'
      // return this.$q.screen.name === "sm"
    }
  }
})