如何在Vue+TypeScript中实现ASCII图案的X/Y双向循环？

核心思路 #

要同时实现X（水平）和Y（垂直）方向的图案循环，需要先完成单行的水平平铺，再将处理后的行集合进行垂直重复，而非仅单独处理垂直方向。

TypeScript逻辑修改 #

假设你已有基础ASCII图案数组，通过以下步骤生成双方向平铺的完整图案：

// 示例基础ASCII图案（替换成你自己的图案）
const baseAscii = [
  "XX..",
  ".XX.",
  "..XX",
  ".XX."
];

// 自定义X/Y方向的重复次数
const repeatX = 3; // 水平重复3次
const repeatY = 2; // 垂直重复2次

// 第一步：水平方向平铺每行
const xRepeatedLines = baseAscii.map(line => line.repeat(repeatX));
// 第二步：垂直方向平铺整组行
const fullAsciiPattern = Array(repeatY).fill(xRepeatedLines).flat().join('\n');

如果需要响应式控制重复次数（Vue3+TS场景），可以用计算属性实现：

import { ref, computed } from 'vue';

export default {
  setup() {
    // 响应式基础图案
    const baseAscii = ref([
      "XX..",
      ".XX.",
      "..XX",
      ".XX."
    ]);
    // 响应式重复次数
    const repeatX = ref(3);
    const repeatY = ref(2);

    // 计算生成最终图案
    const asciiPattern = computed(() => {
      const xLines = baseAscii.value.map(line => line.repeat(repeatX.value));
      return Array(repeatY.value).fill(xLines).flat().join('\n');
    });

    return { asciiPattern, repeatX, repeatY };
  }
}

Bootstrap HTML模板调整 #

使用<pre>标签渲染ASCII图案，确保空格和换行被完整保留：

<div class="container mt-4">
  <pre class="ascii-bg-pattern">{{ asciiPattern }}</pre>
</div>

CSS样式优化 #

为图案设置等宽字体，避免排版错乱：

.ascii-bg-pattern {
  font-family: "Courier New", Courier, monospace;
  white-space: pre;
  line-height: 1; /* 按需调整行高，让图案更紧凑 */
  color: #2d3748;
  /* 如需作为背景，可添加以下样式 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.1;
}

关键说明 #

• String.repeat()：快速实现单行的水平重复，无需手动拼接字符串
• Array.fill().flat()：将水平处理后的行数组重复指定次数并展开，实现垂直平铺
• <pre>标签：是渲染ASCII图案的最佳选择，天然保留空白字符和换行格式

内容的提问来源于stack exchange，提问作者LADsy8