Как сделать боковую панель в компоненте с помощью Quasar Vue Framework 14.3

У меня есть рабочая левая боковая панель, использующая 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-область вне компонента? Когда я включаю его, боковая панель не скрывается, а находится на странице, а при прокрутке вниз фактическая страница оказывается под ней.

Есть предложения, как сделать твердую боковую панель в компоненте с помощью Quasar?


javascript vue.js vue-component quasar-framework
person musicformellons    schedule 17.10.2017    source источник
comment
Я не уверен, что вам нужен ящик, у меня есть некоторые проблемы, чтобы начать с quasar, и поиск помогает увидеть, что существует пример панели администратора quasar, в котором есть ящик и панель инструментов в компонентах, не уверен, может ли это вам помочь .. . github.com/odranoelBR/vue -quasar-admin-example / tree / master / src /   -  person FabianSilva    schedule 18.10.2017
comment
@FabianSilva Спасибо за очень хороший пример. Мне это очень нравится. Я внимательно изучил его, так как из него можно многому научиться. Однако для моей проблемы актуально то, что он использует версию Quasar 13, тогда как я использую v14. В версии 14 ящик был реализован иначе, см. Здесь: quasar-framework.org/components/layout.html   -  person musicformellons    schedule 18.10.2017

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать 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>

Установите флаг true в данных компонента Vue. Вы также можете открывать / закрывать ящик нажатием кнопки, установив флаг true false

person Patel Pratik    schedule 20.09.2018