|
|
@@ -0,0 +1,61 @@
|
|
|
+<template>
|
|
|
+ <view class="no-data-container" :style="{ padding: padding }">
|
|
|
+ <!-- 暂无数据图标 -->
|
|
|
+ <uni-icons
|
|
|
+ type="empty"
|
|
|
+ size="60"
|
|
|
+ color="#ccc"
|
|
|
+ class="no-data-icon"
|
|
|
+ ></uni-icons>
|
|
|
+ <!-- 暂无数据文本 -->
|
|
|
+ <text class="no-data-text" :style="{ color: textColor, fontSize: fontSize + 'px' }">
|
|
|
+ {{ text || '暂无数据' }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { defineProps } from 'vue';
|
|
|
+
|
|
|
+// 定义组件属性，支持自定义样式和文本
|
|
|
+const props = defineProps({
|
|
|
+ // 自定义暂无数据文本，默认“暂无数据”
|
|
|
+ text: {
|
|
|
+ type: String,
|
|
|
+ default: '暂无数据'
|
|
|
+ },
|
|
|
+ // 文本颜色，默认浅灰色
|
|
|
+ textColor: {
|
|
|
+ type: String,
|
|
|
+ default: '#999'
|
|
|
+ },
|
|
|
+ // 文本字号，默认14px
|
|
|
+ fontSize: {
|
|
|
+ type: Number,
|
|
|
+ default: 14
|
|
|
+ },
|
|
|
+ // 容器内边距，默认上下30px，左右0
|
|
|
+ padding: {
|
|
|
+ type: String,
|
|
|
+ default: '30px 0'
|
|
|
+ }
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.no-data-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.no-data-icon {
|
|
|
+ margin-bottom: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.no-data-text {
|
|
|
+ line-height: 1.5;
|
|
|
+}
|
|
|
+</style>
|
