1、先看一下baidu ai出的结果:
2、我们将上面的代码修改下,定义一个数组,然后记录每行的行号及相应的元素:
<template>
<div>console</div>
</template>
<script setup lang="ts">
import { onMounted, reactive } from "vue";
const list = reactive([] as any[]);
function printRows(elementsCount: number, elementsPerRow: number): void {
const rowsCount = Math.ceil(elementsCount / elementsPerRow);
for (let i = 0; i < rowsCount; i++) {
let row = "";
for (let j = 0; j < elementsPerRow; j++) {
const elementIndex = i * elementsPerRow + j;
if (elementIndex < elementsCount) {
row += `${elementIndex}, `;
} else {
break; // 超出元素总数,退出内层循环
}
}
list.push({
row: i,
rowElements: row,
});
// console.log(row.trim().replace(/, $/, "")); // 移除末尾的逗号并打印
}
for(let i = 0; i < list.length; i++){
console.log(list[i].row, list[i].rowElements)
}
}
onMounted(() => {
printRows(100, 9);
});
</script>
3、我们再将上面的代码优化下,让其存对象。
代码:
<template>
<div>console</div>
</template>
<script setup lang="ts">
import { onMounted, reactive } from "vue";
const list = reactive([] as any[]);
function printRows(sourceList, elementsPerRow: number) {
let elementsCount = sourceList.length;
const rowsCount = Math.ceil(elementsCount / elementsPerRow);
for (let i = 0; i < rowsCount; i++) {
// let row = "";
let rowList = [];
for (let j = 0; j < elementsPerRow; j++) {
const elementIndex = i * elementsPerRow + j;
if (elementIndex < elementsCount) {
rowList.push(sourceList[elementIndex]);
} else {
break; // 超出元素总数,退出内层循环
}
}
list.push({
row: i,
rowElements: rowList,
});
// console.log(row.trim().replace(/, $/, "")); // 移除末尾的逗号并打印
}
for (let i = 0; i < list.length; i++) {
console.log(list[i].row, list[i].rowElements);
}
}
onMounted(() => {
printRows(
[
{
id: 1,
name: "a",
},
{
id: 2,
name: "b",
},
{
id: 3,
name: "c",
},
{ id: 4, name: "d" },
{
id: 5,
name: "e",
},
{
id: 6,
name: "f",
},
{
id: 7,
name: "g",
},
{
id: 8,
name: "h",
},
{
id: 9,
name: "i",
},
{
id: 10,
name: "j",
},
{
id: 11,
name: "k",
},
{
id: 12,
name: "l",
},
{
id: 13,
name: "m",
},
{
id: 14,
name: "n",
},
{
id: 15,
name: "o",
},
{
id: 16,
name: "p",
},
{
id: 17,
name: "q",
},
],
9
);
});
</script>
4、最后,项目有这样的需求:用户输入一串字符串,然后我们要根据串的情况,进行自动填到相应的位置上去,来达到整个canvas的输出,也就是达到输出到指定的位置上,但是用户输入情况比较复杂,所以我们就要根据canvas的宽度与高度来自动进行计算,最好我们就有了上面的处理。