Vue.js - 如何在 Vuetify 上有 2 行导航标题答案

【问题标题】：Vuie.js - How to have 2 rows of navigation header on VuetifyVue.js - 如何在 Vuetify 上有 2 行导航标题
【发布时间】：2020-08-22 11:42:42
【问题描述】：

我正在尝试使用 2 行组件创建导航标题。每个都有自己的背景颜色。这与此处使用的类似：

这是我目前设置 App.vue 的方式：

<v-app-bar height="100px" flat app dark flex wrap>
        <v-container>
            <v-layout row>
                test
            </v-layout>
            <v-layout row class="second-layer">
                <div class="center d-flex">
                    <div class="d-flex align-center">
                        <v-img alt="Vuetify Logo" class="shrink mr-2" contain src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png" transition="scale-transition" width="40" />
                        <v-img alt="Vuetify Name" class="shrink mt-1 hidden-sm-and-down" contain min-width="100" src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png" width="200" />
                    </div>
                    <v-spacer></v-spacer>
                    <v-btn href="https://github.com/vuetifyjs/vuetify/releases/latest" target="_blank" text>
                        <span class="mr-2">Latest Release</span>
                        <v-icon>mdi-open-in-new</v-icon>
                    </v-btn>
                </div>
            </v-layout>
        </v-container>
    </v-app-bar>

这是该类的作用域 CSS：

    .second-layer {
       z-index: 999;
    }
   .second-layer:before {
       content: ' ';
       background-color: rgb(214, 214, 55);
       position: absolute;
       height: 70px;
       width: 4000px;
       left: -2000px;
       z-index: -1;
    }

这样，我设法得到它：

在 Vuetify 中有没有更好的方法来做到这一点？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

我认为您应该在页面顶部使用这些组件 v-system-bar 并在其下方使用 v-app-bar ：

var app = new Vue({
  el: '#app',
  vuetify: new Vuetify(),

})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <div>
      <v-system-bar window dark>

        <span>Test</span>
        <v-spacer></v-spacer>

      </v-system-bar>
      <v-app-bar color="deep-purple accent-4" dense dark>


        <div class="d-flex align-center">
          <v-img alt="Vuetify Logo" class="shrink mr-2" contain src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png" transition="scale-transition" width="40" />
          <v-img alt="Vuetify Name" class="shrink mt-1 hidden-sm-and-down" contain min-width="100" src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png" width="200" />
        </div>
        <v-spacer></v-spacer>
        <v-btn href="https://github.com/vuetifyjs/vuetify/releases/latest" target="_blank" text>
          <span class="mr-2">Latest Release</span>
          <v-icon>mdi-open-in-new</v-icon>
        </v-btn>




      </v-app-bar>
    </div>
  </v-app>
</div>

【讨论】：