如何使用 Quasar Vue Framework 14.3 在组件中制作侧面板答案

【问题标题】：How to make a side panel in a component with Quasar Vue Framework 14.3如何使用 Quasar Vue Framework 14.3 在组件中制作侧面板
【发布时间】：2017-10-17 20:40:50
【问题描述】：

我有一个使用 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 在组件中制作实心侧面板有什么建议吗？

【问题讨论】：

我不确定你想要的是否是抽屉，我从 quasar 开始有一些问题，搜索帮助看到存在一个 quasar 管理面板示例，它在组件中有抽屉和工具栏，而不是确定这是否可以帮助您...github.com/odranoelBR/vue-quasar-admin-example/tree/master/src/…
@FabianSilva 感谢您提供的非常好的示例。我很喜欢。我仔细研究了它，因为从中可以学到很多东西。但是对于我的问题，它使用 Quasar 的 13 版是相关的，而我使用的是 v14。在 v14 中，抽屉的实现方式有所不同，请参见此处：quasar-framework.org/components/layout.html

标签： javascript vue.js vue-component quasar-framework

【解决方案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组件的数据中设置标志为真。您也可以通过设置标志为真假来打开/关闭按钮点击抽屉

【讨论】：