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

<template>
    <view class="fx-col fx-cen-cen gap-8 h-[70px]">
        <vue-svg-icons v-if="useSvg" :name="icon" :class="svgClass"/>
        <uv-image :src="combineOssFile(icon)" :mode="imgMode" :width="imgWidth" :height="imgHeight"/>
        <text class="break-keep" :class="titleClass">{{ name }}</text>
    </view>
</template>

<script setup>
import {computed} from "vue";
import {combineOssFile, createPropDefine} from "@/utils";

const props = defineProps({
    icon: createPropDefine(''),
    name: createPropDefine(''),
    useSvg: createPropDefine(false, Boolean),
    svgClass: createPropDefine('w-100 h-100'),
    iconMode: createPropDefine('widthFix'),
    iconSize: createPropDefine(42, [Number, String]),
    titleClass: createPropDefine('text-main'),
});

const imgMode = computed(() =>
    ["widthFix", "heightFix"].includes(props.iconMode)
        ? props.iconMode
        : "widthFix"
);
const imgWidth = computed(() =>
    imgMode.value == "widthFix" ? props.iconSize : "auto"
);
const imgHeight = computed(() =>
    imgMode.value == "heightFix" ? props.iconSize : "auto"
);

</script>

<style scoped>
</style>