EmptyState.vue 776 B

12345678910111213141516171819202122232425262728293031323334
  1. <template>
  2. <view class="empty-state flex flex-col items-center justify-center py-16 px-6">
  3. <view class="empty-icon w-16 h-16 rounded-full flex items-center justify-center mb-4">
  4. <text class="uni-icons text-3xl" :class="icon || 'uniui-info-filled'"></text>
  5. </view>
  6. <text class="empty-text text-sm font-medium">{{ text || '暂无数据' }}</text>
  7. <slot />
  8. </view>
  9. </template>
  10. <script setup lang="ts">
  11. interface Props {
  12. icon?: string
  13. text?: string
  14. }
  15. withDefaults(defineProps<Props>(), {
  16. icon: 'uniui-info-filled',
  17. text: '暂无数据'
  18. })
  19. </script>
  20. <style scoped>
  21. .empty-state {
  22. min-height: 200px;
  23. }
  24. .empty-icon {
  25. background-color: rgba(164, 216, 152, 0.16);
  26. color: rgba(54, 143, 111, 0.55);
  27. }
  28. .empty-text {
  29. color: #6b7280;
  30. }
  31. </style>