Невозможно встроить компоненты vue с md-app-toolbar и md-app-box в md-app - PullRequest
Новая
       11

Невозможно встроить компоненты vue с md-app-toolbar и md-app-box в md-app

0 голосов
/ 26 октября 2018

Я создал проект, используя vue-cli 3. Я хотел поместить ящик и панель инструментов в разные компоненты, чтобы я мог вызывать их при необходимости. Я следовал документации . Если я помещаю весь код в один компонент, он работает, но мне нужно разместить панель инструментов и ящик в разных компонентах. Я вижу только Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea. на странице. Обязательно ли иметь все в одном компоненте? Есть ли способ добиться своей цели?

App.vue 

<template>
  <div class="page-container">
    <vue-progress-bar></vue-progress-bar>
      <md-app>
          <Header :menu-visible="menuVisible" :toggle-menu="toggleMenu" />
          <SidebarMenu :menu-visible="menuVisible" :toggle-menu="toggleMenu" />
          <md-app-content>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea.
          </md-app-content>
      </md-app>
  </div>
</template>


<script>
  import Header from './components/Header';
  import SidebarMenu from './components/SidebarMenu';

  export default {
    components: {
      Header,
      SidebarMenu,
    },
      data() {
          return {
              menuVisible: false,
      }
    },
      methods: {
          toggleMenu () {
              this.menuVisible = !this.menuVisible
          }
      }
  };
</script>

<style scoped>

</style>

Header.vue 

<template>
    <md-app-toolbar class="md-primary" md-elevation="0">
        <md-button class="md-icon-button" @click="toggleMenu" v-if="!menuVisible">
            <md-icon>menu</md-icon>
        </md-button>
        <span class="md-title">My Title</span>
    </md-app-toolbar>
</template>
<script>
    export default {
        props: {
            toggleMenu: Function,
            menuVisible: Boolean
        },
        data() {
            return {};
        },
        methods: {},
    };
</script>
<style scoped>

</style>

SidebarMenu.vue 

<template>
  <md-app-drawer :md-active.sync="menuVisible" md-persistent="mini">
    <md-toolbar class="md-transparent" md-elevation="0">
      <span>Navigation</span>

      <div class="md-toolbar-section-end">
        <md-button class="md-icon-button md-dense" @click="toggleMenu">
          <md-icon>keyboard_arrow_left</md-icon>
        </md-button>
      </div>
    </md-toolbar>

    <md-list>
      <md-list-item>
        <md-icon>move_to_inbox</md-icon>
        <span class="md-list-item-text">Inbox</span>
      </md-list-item>

      <md-list-item>
        <md-icon>send</md-icon>
        <span class="md-list-item-text">Sent Mail</span>
      </md-list-item>

      <md-list-item>
        <md-icon>delete</md-icon>
        <span class="md-list-item-text">Trash</span>
      </md-list-item>

      <md-list-item>
        <md-icon>error</md-icon>
        <span class="md-list-item-text">Spam</span>
      </md-list-item>
    </md-list>
  </md-app-drawer>

</template>
<script>
  export default {
      props: {
          toggleMenu: Function,
          menuVisible: Boolean
      },
    data() {
      return {};
    },
    methods: {}
  };
</script>

<style scoped>
</style>

Редактировать:

Я могу показать панель инструментов на странице с <Header slot="md-app-toolbar" ....... />, но slot трюк не работает для md-app-drawer

...