Vuetify роутер выравнивание - PullRequest
Новая
       20

Vuetify роутер выравнивание

0 голосов
/ 22 мая 2019

Я пытаюсь настроить маршрут, который содержит только таблицу с макетом, вдохновленным командой Vuetify.У меня проблема с тем, что таблица не занимает только небольшую часть экрана.

Я пробовал использовать v-layout с "row", "column" и различными отступами и пометками.

App.vue: 

<template>
  <v-app>
    <router-view/>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Menu.vue: 

<template>
<v-container>
  <v-navigation-drawer
      clipped
      fixed
      v-model="drawer"
      app
    >
      <v-list dense>
        <v-list-tile
        :to="{name: 'dashboard'}"
        >
          <v-list-tile-action>
            <v-icon>dashboard</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Dashboard</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile
        :to="{name: 'settings'}"
        >
          <v-list-tile-action>
            <v-icon>settings</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Settings</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile
        @click="logout();"
        >
          <v-list-tile-action>
            <v-icon>logout</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Logout</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar app fixed clipped-left>
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title>Hello, {{ name }}</v-toolbar-title>
    </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
        <v-layout justify-center align-center>
          <v-flex shrink>
            <router-view></router-view>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
    <v-footer app fixed>
      <span>&copy; arcyfelix 2019</span>
    </v-footer>
    </v-container>
</template>

<script>
export default {
  name: 'MainMenu',
  data() {
    return {
      drawer: false,
      name: 'Wojciech',
    };
  },
  methods: {
    logout() {
      this.$router.push({ name: 'home' });
    },
  },
};
</script>

Dashboard.vue: 

<template>
  <v-layout full-width>
    <v-data-table
      :items="desserts"
      class="elevation-1"
      hide-actions
      hide-headers
      expand
      :loading="true"
    >
      <template v-slot:items="props">
        <td class="text-xs-left">2019-07-01</td>
        <td>{{ props.item.name }}</td>
        <td>
          <v-btn
          small
          depressed
          flat
          >
            Edit
          </v-btn>
        </td>
      </template>
    </v-data-table>
  </v-layout>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      desserts: [
        {
          name: 'Frozen Yogurt',
        },
        {
          name: 'Donut',
        },
        {
          name: 'KitKat',
        },
      ],
    };
  },
};
</script>

router.js: 

import Vue from 'vue';
import Router from 'vue-router';

import Menu from './layouts/Menu.vue';
import MainMenu from './layouts/MainMenu.vue';
import Dashboard from './views/Dashboard.vue';
import Login from './views/Login.vue';
import Home from './views/Home.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: 'auth',
      name: 'auth',
      component: Menu,
      children: [
        {
          path: 'dashboard',
          name: 'dashboard',
          component: Dashboard,
        },
        {
          path: 'settings',
          name: 'settings',
          component: () => import(/* webpackChunkName: "about" */ './views/Settings.vue'),
        },
      ],
    },
    {
      path: '/',
      name: 'mainMenu',
      component: MainMenu,
      children: [
        {
          path: 'home',
          name: 'home',
          component: Home,
        },
        {
          path: 'login',
          name: 'login',
          component: Login,
        },
        {
          path: 'register',
          name: 'register',
          component: () => import(/* webpackChunkName: "about" */ './views/Register.vue'),
        },
      ],
    },
  ],
});

Я бы хотел, чтобы он был на 2/3 или на всю ширину экрана.

1 Ответ

0 голосов
/ 22 мая 2019

То, что вы действительно хотите, это поместить menu вне router-view, в противном случае он должен перезагружаться при каждой загрузке страницы. Вы также хотите переместить определение container внутрь элемента v-content и убедиться, что оно использует fill-height, тем меньше вы получите нечетную фоновую сетку. 

<v-app>
   <my-menu></my-menu>
   <v-content>
       <v-container fluid fill-height>
           <router-view></router-view>
       </v-container>
   </v-content>
</v-app>

Теперь просто измените код и макет панели управления: 

<v-layout row wrap>
    <v-flex xs12>
        //the rest of the dashboard code
    </v-flex> 
</v-layout

И ты в порядке.

...