时间戳

首页 > 解决方案 > 现有应用程序中的 Vue Material 组件

vue.js - 现有应用程序中的 Vue Material 组件

问题描述

我想md-card在现有应用程序中使用来自 Vue Material 的材料。网站上的示例（https://vuematerial.io/components/card/）使用以下内容：

<template>
  <div>
    <md-card>
      ...
    </md-card>

    <md-card md-with-hover>
      ...
    </md-card>
  </div>
</template>

当我在 HTML 页面中使用它并为包含的 div 创建一个 Vue 对象时，组件会显示，但布局不起作用。我已经修改了布局类，但行为与示例不匹配。如何在纯 HTML 页面中配置布局以匹配示例的布局行为？示例页面是否向示例 div 添加了另一层以创建布局行为？

更新：我在 JsFiddle 中尝试了类似的场景，并且效果很好：https ://jsfiddle.net/w9m6q05f/3/ 。在我的应用程序中，无论视图的宽度如何，卡片总是在一列中，并且底部的卡片被拉伸到视图的底部。我需要设置包含 div 的类吗？它可能会被我在其他地方的应用程序覆盖。

更新 2：罪魁祸首是身高：100%

标签： vue.jsvue-material

解决方案

推荐阅读