Situation-Awareness-Platform-Frontend/src/components/NoData/NoData.vue

<template>
    <div class="bg-white w-full flex flex-col items-center py-[20px]">
        <slot name="img">
            <img
                v-if="!hideImg"
                class="block mb-[20px]"
                :width="imgWidth"
                :src="src"
                alt="NoData"
            />
        </slot>
        <slot>
            <div>没有查询到数据</div>
        </slot>
    </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps({
    hideImg: {
        type: Boolean,
        default: false,
    },
    small: {
        type: Boolean,
        default: true,
    },
    imgSrc: {
        type: String,
        default: '',
    },
    width: {
        type: String,
        default: '',
    },
});
const src = computed(() => {
    if (props.imgSrc) {
        return props.imgSrc;
    }
    return props.small ? '/src/assets/imgs/jyh/nodata_small.svg' : '/src/assets/imgs/jyh/nodata.svg';
});
const imgWidth = computed(() => {
    if (props.width) {
        return props.width;
    }
    return props.small ? '128px' : '300px';
});
</script>