1

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

4

1 回答 1

2

您可以使用 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 false 在按钮单击时打开/关闭抽屉

于 2018-09-20T17:55:30.707 回答