Question

我使用vue-cli 3创建了一个项目。我想将抽屉和工具栏放在不同的组件中，以便在需要时可以调用它们。我关注了 the documentation。如果我将所有代码放在一个组件中，那么它可以工作，但是我需要将工具栏和抽屉放在不同的组件中。我只在页面上看到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

无法在md-app中嵌入具有md-app-toolbar和md-app-drawer的Vue组件

0 个答案: