YingXingAI/components/NoData copy.vue

117 lines
3.4 KiB
Vue

<template>
<view class="empty-container">
<image :src="getImage" class="empty-image" mode="widthFix"></image>
<text class="empty-text">{{ text }}</text>
</view>
</template>
<script>
// 暂无数据
import noDataDefault from "@/static/common/img/noData/no-data.png";
// 暂无搜索
import noDataSearch from "@/static/common/img/noData/no-search.png";
// 暂无消息
import noDataMessage from "@/static/common/img/noData/no-message.png";
// 网络异常
import errorNet from "@/static/common/img/noData/error-net.png";
// 数据加载失败
import errorData from "@/static/common/img/noData/error-data.png";
// 维护中
import maintenance from "@/static/common/img/noData/maintenance.png";
// 暂无附件简历
import noAttachmentResume from "@/static/common/img/noData/no-attachment-resume.png";
// 暂无收藏
import noCollection from "@/static/common/img/noData/no-collection.png";
// 暂无评论
import noComments from "@/static/common/img/noData/no-comments.png";
// 暂无内容
import noContent from "@/static/common/img/noData/no-content.png";
// 暂无文件
import noFile from "@/static/common/img/noData/no-file.png";
// 暂无好友
import noFriends from "@/static/common/img/noData/no-friends.png";
// 暂无网络
import noInternet from "@/static/common/img/noData/no-internet.png";
// 暂无权限
import noPermissions from "@/static/common/img/noData/no-permissions.png";
// 暂无图片
import noPicture from "@/static/common/img/noData/no-picture.png";
export default {
name: "NoData",
props: {
// 图片类型
type: {
type: String,
default: "default",
},
// 描述文字,默认值为"暂无数据"
text: {
type: String,
default: "暂无数据",
},
},
computed: {
getImage() {
const imageMap = {
default: noDataDefault,
search: noDataSearch,
message: noDataMessage,
errorNet: errorNet,
errorData: errorData,
maintenance: maintenance,
resume: noAttachmentResume,
collection: noCollection,
comments: noComments,
content: noContent,
file: noFile,
friends: noFriends,
internet: noInternet,
permissions: noPermissions,
picture: noPicture,
};
return imageMap[this.type] || imageMap.default;
},
},
data: {
/*
<no-data type="default" text="暂无数据" />
<no-data type="errorNet" text="网络错误" />
<no-data type="search" text="暂无搜索内容" />
<no-data type="errorData" text="数据加载失败" />
<no-data type="message" text="暂无消息" />
<no-data type="maintenance" text="系统维护中" />
<no-data type="resume" text="暂无简历附件" />
<no-data type="collection" text="暂无收藏" />
<no-data type="comments" text="暂无评论" />
<no-data type="content" text="暂无内容" />
<no-data type="file" text="暂无文件" />
<no-data type="friends" text="暂无好友" />
<no-data type="internet" text="无网络连接" />
<no-data type="permissions" text="暂无权限" />
<no-data type="picture" text="暂无图片" /> */
},
};
</script>
<style scoped>
.empty-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20rpx;
text-align: center;
}
.empty-image {
width: 400rpx;
height: 400rpx;
margin-bottom: 20rpx;
}
.empty-text {
font-size: 32rpx;
color: #000;
}
</style>