vue3_YDHL/pages/prescriptionExecute/components/NoData.vue

<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>