vue.js - 在 Vuetify 的 v-toolbar 组件上动态添加后退箭头

Question

我正在做一个项目，在某些 View 中我需要添加后退箭头以返回到之前的 vue-router View 。

到目前为止，我已经为工具栏创建了一个单独的组件，并将其加载到主 App 组件中，因为所有屏幕都将采用该布局。

我现在尝试在每个 View 中加载工具栏组件，传递一个 prop 来确定箭头是否应该存在，并使用 v-if 将其可视化，如下所示:

工具栏模板

<template>
  <v-toolbar color="amber" app>
    <v-btn v-if="backArrow" icon class="hidden-xs-only">
      <v-icon>arrow_back</v-icon>
    </v-btn>
    <v-toolbar-title>Babbelbord</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-btn icon to="/">
      <v-icon>home</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>settings</v-icon>
    </v-btn>
  </v-toolbar>
</template>

传递 prop 以可视化箭头

<template>
  <div>
    <page-header backArrow="true"></page-header>
    ....
  </div>
</template>

这确实有效，但是考虑到所有模板代码必须位于唯一容器元素内的限制，我的工具栏现在不再覆盖整个屏幕。

针对此问题还有其他建议的方法吗？

Answer 1

我建议您将整个应用程序包装在 v-app 组件中，如 https://vuetifyjs.com/en/layout/pre-defined 中所述。 . 这会处理工具栏的大小。

组件树看起来像这样:

• v-应用程序
  • 页眉
    • v-工具栏
      • 后退箭头
      • ...
  • v-内容
    • ...

看看https://codepen.io/anon/pen/oEaMRr为您的 page-header

使用内联模板的工作示例