uni-app v-for 一行限制4个(占位)

<template>
  <view>
    <image class="respon-image" :src="isIcon" mode="aspectFit"></image>
    <view class="container">
      <view class="functional-entry" v-for="(entry, index) in Controllist" :key="entry.id">
        <image class="icon" :src="entry.img" mode="aspectFit"></image>
        <text class="text" :style="{ lineHeight: lineHeightStyle }">{{ entry.name }}</text>
      </view>
      <view v-for="n in getSpaces" :key="'space-${n}'" class="functional-entry space"></view>
    </view>
  </view>
</template>

<script setup>
const isIcon = ref("/static/control_back.png");

const Controllist = ref([
  { id: '1', name: '1', img: '/static/control1.png' },
  { id: '2', name: '2', img: '/static/control2.png' },
  { id: '3', name: '3', img: '/static/control3.png' },
  { id: '4', name: '4', img: '/static/control4.png' },
  { id: '5', name: '5', img: '/static/control1.png' },
  { id: '6', name: '6', img: '/static/control1.png' },
  { id: '7', name: '7', img: '/static/control1.png' }
]);

const lineHeightStyle = computed(() => '1.5em'); // 例如，设置为字体大小的1.5倍

const getSpaces = computed(() => {
  const spaces = [];
  const entriesCount = Controllist.value.length;
  const rows = Math.ceil(entriesCount / 4);
  for (let i = 0; i < rows; i++) {
    const spacesPerRow = 4 - (entriesCount - i * 4);
    for (let j = 0; j < spacesPerRow; j++) {
      spaces.push(null); // 添加占位符null
    }
  }
  return spaces;
});
</script>

<style lang="scss" scoped>
.respon-image {
  width: 100%;
  height: 210px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px;
}

.functional-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-basis: 24%;
  margin-bottom: 20px;
}

.functional-entry.space {
  flex-basis: 24%;
  height: 0;
  padding-bottom: 100%;
}

.icon {
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
}

.text {
  font-size: 12px;
  text-align: center;
  margin: 0;
  padding: 0;
  width: 100%;
  line-height: 1.5em; /* 使用计算属性设置行高 */
}
</style>