使用 Vuetify 创建动态游戏板？

Question

我已经为 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>

输出如下所示：

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

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

提前致谢。

Answer 1

不应有间隙。看看这个codesandbox，我用了你的标记，图块之间没有缝隙。检查您的“.gamePanel-wrapper”或“tileImage”类，如果没有 css 规则导致此问题。或者，在提供的沙箱中重现该问题，并 post 此处。
此外，它在沙箱中工作，尽管对于 3。我将方向更改为 column 并使用 align="center"。
我不太明白你所说的“与板齐平”和“锁定”是什么意思，但我猜是类似于示例中的灰色区域。如果不是，请说明。

使用 Vuetify 创建动态游戏板？

Using Vuetify to create a dynamic game board?

styling

flexbox

vue.js

nuxt.js

vuetify.js