Question

我正在开发一个项目，在某些视图中，我需要添加后退箭头以返回上一个vue-router视图。

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

我现在尝试在每个视图中加载工具栏组件，传递一个道具以确定箭头是否存在，并使用v-visual进行可视化，如下所示：

工具栏模板

import {signIn} from '../../app/saga/AccountSagas';
import { SIGN_IN, SIGN_UP,SHOW_SIGN_UP, SIGNED_IN, ERROR } from '../../app/action/types';
import { AccountRepo } from '../../app/repo';

describe(' >>> signIn', () => {

  const action = {type: SIGN_IN, payload: {user: {uid:'DFDDGDG'}}};
  const generator = signIn(action);
  it('+++ must call AccountRepo.getAccount', () => {
       //const generator = testFunction1("Gethyl")
       const testValue = generator.next().value;
       console.log(testValue);
       expect(testValue).toEqual(call(AccountRepo.getAccount,action.payload.user))
    });

} )

传递道具可视化箭头

<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>

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

针对此问题的任何其他建议方法？

Answer 1

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

组件树看起来像这样：

V-应用
- 页头
  - V-工具栏
    - 后退箭头
    - ...
- V-内容
  - ...

使用page-header

的内嵌模板，查看https://codepen.io/anon/pen/oEaMRr的工作示例

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

1 个答案: