在一页中堆叠 vuetify 元素

Posted 2023-02-22

【中文标题】在一页中堆叠 vuetify 元素

【英文标题】：stack vuetify elements in one page

【发布时间】：2019-05-12 20:24:11

【问题描述】：

使用 vuetify，如何让两个 UI 组件显示在一个单一页面上？我尝试在一个括号内组合元素并收到错误消息。当单独堆叠组件时，只有底部模板出现在前端。有没有办法使用 vue-router 的两个堆栈 UI 组件？

编辑：我的目标是将两个 ui 组件（例如来自 vuetify 的照片网格和轮播）放在一起，以创建类似于此屏幕截图 mash-up 的打印输出。

这是生成我当前的本地主机打印输出 code sample of stacking templates 和 localhost printout 的代码。

 <template>
 <v-layout>
<v-flex xs12 sm6 offset-sm3>
  <v-card>
    <v-container grid-list-sm fluid>
      <v-layout row wrap>
        <v-flex
          v-for="n in 9"
          :key="n"
          xs4
          d-flex
        >
          <v-card flat tile class="d-flex">
            <v-img
              :src="`https://picsum.photos/500/300?image=$n * 5 + 10`"
              :lazy-src="`https://picsum.photos/10/6?image=$n * 5 + 10`"
              aspect-ratio="1"
              class="grey lighten-2"
            >
              <v-layout
                slot="placeholder"
                fill-height
                align-center
                justify-center
                ma-0
              >
                <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
              </v-layout>
            </v-img>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-card>
  </v-flex>
</v-layout>

<v-carousel>
  <v-carousel-item
    v-for="(item,i) in items"
    :key="i"
    :src="item.src"
  ></v-carousel-item>
</v-carousel>
</template>

【问题讨论】：

您需要发布一些代码，显示您已完成的工作以及您的预期。

请在问题中包含代码。确保只包含重现问题所需的最少代码。您可以通过在编辑器中选择代码来设置代码样式，然后单击编辑字段上方的 按钮。也就是说，快速浏览一下您的屏幕截图就会发现您没有使用有效的 SFC 语法。确保只有一个*** <template> 标签

@Sumurai8 如果只允许一个模板，如何像发布的第一个屏幕截图一样将两个单独的组件或多个 .... 包含在一个页面中。

我添加了代码@Sumurai8

【参考方案1】：

您的问题是您有两个模板标签，如果您将底部模板标签的内容移动到第一个标签中，它应该可以工作。它应该看起来像这样：

<template>
    <div>
        <v-layout>
            v-card etc...
        </v-layout>
        <v-carousel>
            v-carousel-item etc...
        </v-carousel>
    </div>
</template>
<script>
    javscript code...
</script>

正如@sumurai8 所说，您应该只有一个***模板标签。

【讨论】：

当我在上面的结构中设置默认路由 home.vue 时，我收到以下错误 - 组件模板应该只包含一个根元素。如果您在多个元素上使用 v-if，请改用 v-else-if 链接它们。

这里是 home.vue 的链接

你错过了我放在那里的 div，这是因为你只能有一个根级元素。因此，将 div 元素放在模板中，然后将其他所有内容放在 div 中。它应该工作