如何使用Quasar Vue Framework 14.3在組件中制作側面板

Question

我有一個使用Quasar版本14.3的工作左側面板。 現在，我想使其成為一個組件。 當我使用這個：

<template>
  <q-layout ref="layout"
            :left-breakpoint=0>

    <q-scroll-area slot="left" style="width: 80%; height: 100%>
      <div>
        <left-panel></left-panel>
      </div>
    </q-scroll-area>
  </q-layout>
</template>

但是，這種工作方式是：

• 寬度給CSS問題
• 我真的必須將q-scroll-area區域排除在組件之外嗎？ 當包含它時，側面板不會隱藏，而是在頁面中，然后當您向下滾動時，實際頁面在其下方。

關於如何使用Quasar在組件中制作堅固的側面板的任何建議？

Answer 1

您可以使用q-layout-drawer在q-layout中創建左側面板

<template>
  <q-layout ref="layout"
            :left-breakpoint=0>
    <q-layout-drawer v-model="flag" side="left">
    <q-scroll-area slot="left" style="width: 80%; height: 100%>
      <div>
        <left-panel></left-panel>
      </div>
    </q-scroll-area>
    </q-layout-drawer>
  </q-layout>
</template>

在Vue組件的數據中將標志設置為true。也可以通過將標志設置為true來在單擊按鈕時打開/關閉抽屜