时间戳

首页 > 解决方案 > 使用 Vuetify 创建动态游戏板？

vue.js - 使用 Vuetify 创建动态游戏板？

问题描述

我为 Nuxt 组件编写了一些代码，该组件采用国际象棋 PGN 并将其转换为应用程序上的一系列 png 图像。代码如下所示：

<template>
<v-container fluid class="gamePanel-wrapper">
  <v-row no-gutters>
    <div v-for="col in Array(8).keys()" :key="col.key">
      <div v-for="row in Array(8).keys()" :key="row.key">
        <img :src="getTile(row,col)" class="tileImage">
      </div>
    </div>
  </v-row>
  <v-row>
    <v-col align="center">
      <h3>Turn Information Goes Here</h3>
    </v-col>
  </v-row>
</v-container>
</template>

输出如下所示：

国际象棋输出

关于如何让这个游戏板看起来像我想要的样子，我有几个问题：

  1. 如何使用 Vuetify 排列游戏板的瓦片，使它们在各个方向上相互齐平且没有间隙？我将使用 nuxt-image 模块根据显示断点更改图块的大小，因此它需要能够对此做出反应。
  2. 我似乎无法通过将 justify="center" 放入 v-row 来使整个板居中。我将如何在父容器中水平居中这个游戏板？
  3. 我有一些框架需要放在电路板的外侧 4 个边缘。如何将它们锁定到位，以便它们始终与游戏板的其余部分齐平？我认为这不是顶部和底部框架的问题，但我如何将垂直框架锁定到位？

提前致谢。

标签： vue.jsflexboxnuxt.jsvuetify.jsstyling

解决方案

  1. 不应该有任何间隙。看看这个代码框，我用了你的标记，瓷砖之间没有间隙。如果没有导致这种情况的 css 规则，请检查您的“.gamePanel-wrapper”或“tileImage”类。或者，在提供的沙箱中重现问题，并在此处发布。

  2. 此外，它在沙箱中工作，虽然为 3。我将方向更改为column并使用align="center".

  3. 我不太明白您所说的“与板齐平”和“锁定”是什么意思，但我认为类似于示例中的灰色区域。如果不是，请解释。

推荐阅读