背景：

在项目开发中，会请求接口，就会遇到加载中、加载成功、加载失败、和加载成功但暂无数据等情况。就自行封装了一个加载组件。采用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>

使用示例：

备注：

涉及到的图片如下：