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>

我在这里也检查了这个答案：

但这并不是我真正想要的，因为 drawer 的模式卡住了并且没有响应地改变。有什么建议吗？

Answer 1

你的代码有几个错误；

您正在重复您的数据属性 miniState 作为计算属性。数据函数中的 miniState 属性将覆盖计算的属性;因此它将永远是 false
您没有从计算中返回值属性；相反，您只是在分配。
仍然； window 属性，例如 innerWidth 在 Vue 中不是反应式的，也不是可观察的。如果我错了，请纠正我。因此，观看 window.innerWidth 不会在每次调整 window 时触发。

由于您使用的是 Quasar，因此您可以使用 Quasar 附带的 screen 插件。您不必安装任何东西，默认情况下会安装 screen 插件。 Here is the link to the docs.

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

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

还有;附带一提，如果你只是从 Vue 和 Quasar 开始，Vue 现在升级到 Vue3，它带有支持 Vue3.

的 composition api. Quasar is also being upgraded to version 2

跟着下面的评论，你就明白代码了！

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>

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

Quasar: Drawer changes to automatically Mini-mode

vue.js

responsive

quasar-framework

drawer