vuejs2 - 如何使用 quasar-framework 创建顶部菜单栏

Question

我正在尝试 Quasar 框架，演示或当前活动的网站（在：https ://github.com/quasarframework/quasar-awesome ）中没有任何内容显示顶部菜单栏是如何使用的框架，我认为这是大多数 Web 框架中的标准。请帮忙。

Answer 1

由于 quasar 是用于构建应用程序的 PWA 框架，因此它不支持。不过，您可以稍微调整一下，然后将按钮放在顶部。

<q-toolbar-title>
<q-btn></q-btn>
</q-toolbar-title>

您还可以在按钮内添加弹出框以制作下拉按钮。

Answer 2

我在我的一个项目中做了类似的事情。它将在大屏幕上内联显示菜单项，并作为小屏幕的弹出菜单项。您可以根据需要修改布局。

<template> 
   <q-layout>
     <q-layout-header >
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen" >
          <q-icon name="menu" />
        </q-btn>
        <img
          class="ml-2"
          height="30"
          alt="Company logo"
          src="~assets/logo.png"
        >
        <q-btn
          :color="showActions?'secondary':''"
          :icon="showActions?'keyboard_arrow_up':'keyboard_arrow_down'"
          flat
          class="lt-sm ml-auto"
          @click.native="showActions = !showActions"
        />


        <div class="action-buttons ml-auto gt-xs" >
          <q-btn
            v-for="item in toolbarButtons"
            :key="item.label"
            :icon="item.icon"
            :label="item.label"
            flat
            @click="item.action()"
          />
        </div>
      </q-toolbar>
      <div class="row justify-end">
        <div class="col-7" >
          <q-popover
            :anchor-click="true"
            v-model="showActions"
            fit
            anchor="bottom left"
            class="lt-sm"
          >
            <q-list
              separator
              link>
              <q-item
                v-close-overlay
                v-for="item in toolbarButtons"
                :key="item.label"
                @click.native="item.action()"
              >
                <q-item-side >
                  <q-icon :name="item.icon"/>
                </q-item-side>
                {{ item.label }}
              </q-item>
            </q-list>
          </q-popover>
        </div>
      </div>
     </q-layout-header>
   </q-layout>
  </template>


<script>
export default {
  name: 'LayoutName',
  data() {
    return {
      leftDrawerOpen: false,
      showActions: false,
      toolbarButtons: [
        {
          label: 'Share',
          icon: 'fa fa-share',
          action: () => {
            this.$router.push('/import');
          },
        },
        {
          label: 'Save',
          icon: 'fa fa-save',
          action: () => {
          },
        },
        ...
      ],
    };
  },
};
</script>