如何使用 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 的数据中设置 flag true component.You 也可以通过设置 flag true false open/close 按钮点击抽屉

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

How to make a side panel in a component with Quasar Vue Framework 14.3

javascript

vue.js

vue-component

quasar-framework