app-govern/components/Cn-grid/Cn-grid.vue

<template>
    <view class="grid-nav">
        <view class="grid-nav-title" v-if="title">{{ title }}</view>
        <view class="grid-nav-content">
            <slot />
            <Cn-grid-item background="#fff" v-for="item in seat" :key="item"></Cn-grid-item>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        title: {
            type: String,
            default: '',
        },
        autoFill: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            seat: [], // 占位
        }
    },
    mounted() {
        if (this.autoFill) {
            console.warn(this.$slots.default.length)
            let num = this.$slots.default.length
            let yushu = num % 4
            if (yushu > 0) {
                for (let i = 0; i < 4 - yushu; i++) {
                    this.seat.push(i)
                }
            }
        }
    },
    components: {},
}
</script>
<style lang="scss">
.grid-nav {
    border-radius: 12rpx;
    overflow: hidden;
    background: $uni-theme-white;

    .grid-nav-title {
        height: 80rpx;
        line-height: 80rpx;
        text-indent: 40rpx;
        border-bottom: 2rpx solid #f6f7f8;
        color: #999;
        font-size: 28rpx;
    }

    .grid-nav-content {
        background: #f6f7f8;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 2rpx;
    }
}
</style>