flex布局 justify-content: space-between,末行数量不足时站位使用
- vue组件封装
<template>
<div v-for="item in count" :key="item" :style="{ height: 0, width: currentWidth }" class="flex_left"></div>
</template>
<script setup lang="ts">
interface IProps {
currentWidth?: string;
count?: number;
}
withDefaults(defineProps<IProps>(), {
currentWidth: '20%',
count: 5,
});
</script>
- 使用
const FlexItem = defineAsyncComponent(() => import('@/views/components/flexItem.vue'));
<template>
<FlexItem currentWidth="25%" :count="4" />
</template>
