代码之家 › 专栏 › 技术社区 › ÑÐ¾Ð²ÑÐ°Ñ

布局组件(抽屉、工具栏等)不作为组件使用

vue-material vue-component vuejs2 vue.js javascript

ÑÐ¾Ð²ÑÐ°Ñ · 技术社区 · 7 年前

我正在使用vue vue-material .

我目前正在使用 md-app 作为的根 md-[app-]drawer , md-[app-]toolbar 和 md-[app-]content .

如果我将这些组件直接放置在 md应用程序 tag,它们起作用了。如下所示:

<template>
  <div class="md-layout-row">
    <md-app>
      <md-drawer>
        <md-list>
          <md-list-item>
            <md-icon>people</md-icon>
            <span class="md-list-item-text">Foo</span>
          </md-list-item>

          <md-list-item>
            <md-icon>view_list</md-icon>
            <span class="md-list-item-text">Bar</span>
          </md-list-item>
        </md-list>
      </md-drawer>
    </md-app>
  </div>
</template>

但出于设计目的,我尝试提取每个内部部件(在本例中 md-drawer 标记)到自己的vue组件中。

问题

我有我的 Drawer 现在,它看起来是这样的:

<template>
  <md-drawer>
    <md-list>
      <md-list-item>
        <md-icon>people</md-icon>
        <span class="md-list-item-text">Foo</span>
      </md-list-item>

      <md-list-item>
        <md-icon>view_list</md-icon>
        <span class="md-list-item-text">Bar</span>
      </md-list-item>
    </md-list>
  </md-drawer>
</template>

.. 还有我的 md应用程序 (导入组件ofc后)现在如下所示:

<template>
  <div class="md-layout-row">
    <md-app>
      <MyDrawer />
    </md-app>
  </div>
</template>

但这根本无法呈现抽屉。为什么会这样?Vue是否额外包装可能会与Vue材质的css相混淆的组件?是否有办法绕过/修复此问题。。还是我只是用错了方法?

添加(编辑1)

经过一些实验,我发现如果环绕 MyDrawer 标记为 md-[应用程序-]内容 标记,但这不会导致我正在寻找的布局。

我猜 md应用程序 正在专门寻找这些组件,因为它不知道如何处理 我的抽屉 标记它只是忽略它?虽然 我的抽屉 本质上是 md抽屉 标签/组件?

添加(编辑2)

我一直在读关于 DOM Template Parsing Caveats ,我想这应该行得通,但我还没有成功。我刚刚宣布 <md-drawer is="MyDrawer" /> 标记并移除主包装 md抽屉 标记自 我的抽屉 组成部分

1 回复 | 直到 7 年前

Volodymyr Symonenko 7 年前

组件使用不当 doc

md active-类型=布尔值。用于触发抽屉可见性的选项。应与一起使用。同步修改器。默认值=false

用于的示例 Drawer :

<md-drawer :md-active.sync="showNavigation">
  ...
</md-drawer>

md-app 不准确的看见 Component-Naming-Conventions

用于的示例 md应用程序 :

<md-app>
  <my-drawer />
</md-app>

*注意事项 但在使用之前,请查看下一个答案

添加(编辑1)-不正确。

将忽略作为md app标记的直接子级传递的任何其他标记。组件将只查找这三个标记,并为它们选择正确的位置。 Documentation

用于的示例 md应用程序 :

<md-app md-waterfall md-mode="fixed-last">
  <md-app-toolbar class="md-large md-dense md-primary">
    <div class="md-toolbar-row">
      <div class="md-toolbar-section-start">
        <md-button class="md-icon-button" @click="menuVisible = !menuVisible">
          <md-icon>menu</md-icon>
        </md-button>
        <span class="md-title">My Title</span>
      </div>

      <div class="md-toolbar-section-end">
        <md-button class="md-icon-button">
          <md-icon>more_vert</md-icon>
        </md-button>
      </div>
    </div>

    <div class="md-toolbar-row">
      <md-tabs class="md-primary">
        <md-tab id="tab-home" md-label="Home"></md-tab>
        <md-tab id="tab-pages" md-label="Pages"></md-tab>
      </md-tabs>
    </div>
  </md-app-toolbar>

  <md-app-drawer :md-active.sync="menuVisible">
    <md-toolbar class="md-transparent" md-elevation="0">Navigation</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>
  </md-app-drawer>

  <md-app-content>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
  </md-app-content>
</md-app>

添加(编辑2)-不正确。 is 对你来说没关系。 see using API 和组件命名约定

只需使用标签: <md-drawer/>

更新

如何使用自定义 抽屉 在里面 md应用程序 .

drawer 必须包裹在 md-app-drawer

实例

代码:

<md-app-drawer :md-active.sync="menuVisible">
  <custom-drawer/>
</md-app-drawer>

App

Component