如何用类星体Vue框架14.3在组件中制作侧板

Question

我有一个工作的左侧面板使用类星体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-滚动区域排除在组件之外吗？当我包括它时，边面板不会隐藏，而是在页面中，然后当你向下滚动时，实际的页面就在它下面。

对于如何在类星体组件中制作实心侧板有什么建议吗？

Answer 1

您可以使用q布局抽屉来创建q布局中的左面板。

<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 component.You的数据中设置标志true也可以通过设置标志真假来打开/关闭按钮上的抽屉