在 Vuetify 的 v-toolbar 组件上动态添加后退箭头答案

【问题标题】：Dynamically add back arrow on Vuetify's v-toolbar component在 Vuetify 的 v-toolbar 组件上动态添加后退箭头
【发布时间】：2018-01-06 11:07:08
【问题描述】：

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

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

我现在尝试在每个视图中加载工具栏组件，传递一个道具来确定箭头是否应该存在，并使用 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>

传递道具以可视化箭头

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

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

对于这个问题还有其他建议的方法吗？

【问题讨论】：

标签： vue.js material-design vuetify.js

【解决方案1】：

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

组件树如下所示：

v-app
- 页眉
  - v-工具栏
    - 后退箭头
    - ...
- v-内容
  - ...

查看 https://codepen.io/anon/pen/oEaMRr 以获取使用 page-header 的内联模板的工作示例

【讨论】：