背景：
在項目開發中，會請求接口，就會遇到加載中、加載成功、加載失敗、和加載成功但暫無數據等情況。就自行封裝了一個加載組件。采用vue3+element+setup組合式寫法。
實現效果：
?
封裝組件：
//封裝組件
<template><div class="loadding_contaniers" v-if="loadState == 1"><div class="loading_img"><img :src="loadingImg1" /></div><div class="imgTitle">加載中<span id="dot">...</span></div></div><div class="loadding_contaniers" v-else-if="loadState == 2"><div class="loading_img"><img :src="loadingImg2" /></div><div class="imgTitle">請求失敗，請重新加載！</div></div><div class="loadding_contaniers" v-else-if="loadState == 3"><div class="loading_img"><img :src="loadingImg3" /><!-- <img :src="props.noticeTip == '暫無數據' ? loadingImg3 : loadingImg2" /> --></div><div class="imgTitle">{{ noticeTip }}</div></div><div class="loadding_contaniers" v-else-if="loadState == 404"><div class="loading_img"><img :src="loadingImg3" class="img404" /><!-- <img :src="props.noticeTip == '暫無數據' ? loadingImg3 : loadingImg2" /> --></div><div class="imgTitle">{{ noticeTip }}</div></div><div class="loadding_sucess" v-else><slot> </slot></div>
</template><script setup>
import { getAssetsFile } from "@/utils";
import loadingImg1 from "@/assets/images/loadingImg/isLoading_bg.png";
import loadingImg2 from "@/assets/images/loadingImg/isErr_bg.png";
import loadingImg3 from "@/assets/images/loadingImg/isNone_bg.png";
const props = defineProps({// 1:加載中 2：加載失敗 3：暫無數據 4：加載成功loadState: Number,noticeTip: {type: String,default: "暫無數據",},
});
</script><style lang="scss" scoped>
.loadding_contaniers {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;.loading_img {> img {width: 150px;height: 150px;}.img404{width: 50px;height: 50px;}}.imgTitle {// flex: 1;// height: 0;color: #757575;#dot {display: inline-block;width: 1.5em;vertical-align: bottom;overflow: hidden;animation: dotting 0.5s infinite step-start;}@keyframes dotting {0% {width: 0;margin-right: 1.5em;}33% {width: 0.5em;margin-right: 1em;}66% {width: 1em;margin-right: 0.5em;}100% {width: 1.5em;margin-right: 0;}}}
}
.loadding_sucess {width: 100%;height: 100%;
}
</style>
使用示例：
備注：
涉及到的圖片如下：
?
?
)
