dz-app/components/mx-index-menus/mx-index-paged-menus.vue

<template>
    <view :class="[containerClass, gapClass]" class="grid">
        <mx-index-menus-item v-for="item in props.data" v-bind="item" :icon-size="iconSize" :title-class="titleClass"
                             @click="emits('click', item)"/>
    </view>
</template>

<script setup>
import {computed} from "vue";
import {shareProps} from "./shareProps";
import MxIndexMenusItem from "@/components/mx-index-menus/mx-index-menus-item.vue";

const props = defineProps({...shareProps});
const emits = defineEmits(["click"]);

// NOTE: dynamic class name is not be allowed in tailwindcss, notice `safelist` in `tailwind.config`
const containerClass = computed(() => "grid-cols-" + props.columns);
</script>

<style scoped>
</style>