如何使用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来在单击按钮时打开/关闭抽屉