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

Question

我正在使用 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 的模式被卡住并且没有响应地改变。有什么建议吗？

Answer 1

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

1. 您将数据属性 miniState 重复为计算属性。数据函数内的miniState 属性将覆盖计算属性；因此它将永远是false

2. 您没有从计算属性返回值；相反，您只是在分配。

3. 还是；诸如 innerWidth 之类的窗口属性在 Vue 中是不可响应和可观察的。如果我错了，请纠正我。因此，观看window.innerWidth 不会在每次调整窗口大小时触发。

由于您使用的是 Quasar，您可以使用 Quasar 附带的 screen 插件。你不需要安装任何东西，screen 插件是默认安装的。 Here is the link to the docs.

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

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

还有；附带说明一下，如果您只是从 Vue 和 Quasar 开始，Vue 现在升级到 Vue3，它附带 composition api。 Quasar 也是upgraded to version 2，支持Vue3。

按照下面的cmets，你就会明白代码了！

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"
    }
  }
})

<!-- quasar and vue includes -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@quasar/extras/material-icons/material-icons.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.umd.min.js"></script>
<!-- end of includes -->

<!-- app -->
<div id="q-app">
  <template>
      <div class="q-pa-md">
        <q-layout view="hHh Lpr lff" container style="height: 300px" class="shadow-2 rounded-borders">
          <q-header elevated class="bg-black">
            <q-toolbar>
              <q-toolbar-title>Header</q-toolbar-title>
            </q-toolbar>
          </q-header>

          <q-drawer
            v-model="drawer"
            show-if-above

            :mini="miniState"
            :breakpoint="200"
            :width="200"
            bordered
            class="bg-grey-3"
          >
            <q-scroll-area class="fit">
              <q-list padding>
                <q-item clickable v-ripple>
                  <q-item-section avatar>
                    <q-icon name="send" />
                  </q-item-section>
                  <q-item-section>
                    Send
                  </q-item-section>
                </q-item>
              </q-list>
            </q-scroll-area>
          </q-drawer>

          <q-page-container>
            <q-page padding>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?
              </p>
            </q-page>
          </q-page-container>
        </q-layout>
      </div>
    </template>
</div>